GitHub + Hexo 建站过程记录

一、背景说明:

1. Hexo:Hexo 是一个基于 node.js 制作的快速、简洁且高效的博客框架。Hexo 可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。

2. GitHub:在不购买服务器的前提下,我们的网站需要挂在GitHub Pages上。GitHub Pages是面向用户、组织和项目开放的公共静态页面搭建托管服务,可用于搭建个人博客。首先你需要拥有一个GitHub账号。然后进入GitHub Pages,一步步做,完成后就能在浏览器打开http://username.github.io了。至此,我们已经利用GitHub Pages搭建好了个人博客雏形了。下面要做的,就是个性化了。

3. 本地环境:这里只演示mac, 需要安装 node, npm, hexo。

二、前期准备:

1. 查看必备工具是否完善:

[ yine@zerostudio  ~/Code/mine-obj  node -v
v12.3.1
[ yine@zerostudio  ~/Code/mine-obj  npm -v
6.9.0
[ yine@zerostudio  ~/Code/mine-obj  hexo -v
hexo-cli: 3.1.0
os: Darwin 19.4.0 darwin x64
node: 12.3.1
v8: 7.4.288.27-node.18
uv: 1.29.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72

2. 正式开始: 确定拥有了Git、Node.js和Hexo后,进行下一步, 这些工具在mac上都可以用brew进行安装,这里就不多说了:

三、建站:

1. 安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

2. 新建完成后目录初始文件如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

3. 这样Hexo会在该文件夹创建本地博客所需的一切资源。这样本地博客就搭建好了,输入以下命令:

hexo s --debug // 启动本地hexo 服务器,默认localhost:4000可以访问,可以看到调试信息

这样就开启了一个本地博客服务器,打开浏览器,在地址栏输入localhost:4000,就可以查看本地博客了,hexo默认生成了一片hello world博客。出现问题可以看terminal终端错误信息。按control + c关闭调试。

4. 在github建一个 [yourname].github.io, yourname是你的github的用户名, 后边的是固定的github的域名。

5. 同步Hexo博客到Github

在terminal终端,将当前目录切换到你的本地博客目录,执行以下命令:

npm install hexo-deployer-git --save

安装完成之后,打开本地博客目录的_config.yml文件,编辑其中的deploy节点:

deploy:
  type: git
  repo: https://github.com/[yourname]/[yourname].github.io.git
  branch: master

保存配置之后,你可以不着急传到仓库,先刷新本地博客,看是否还是原样,如有问题可以看到terminal终端上的错误信息,然后检查没问题为止。

确认无误之后,在本地博客目录执行以下命令:

hexo clean // clean本地项目,防止缓存
hexo g // 全拼是:hexo generate,可以简写成 hexo g; 根据你编辑的md格式的博客,生成静态网页
hexo d  // 全拼是:hexo deploy,可以简写成 hexo d; 将本地博客发布到github

然后,在浏览器地址栏输入yourname.github.io就可以访问你的博客了,别人也可以通过这个地址访问你的博客。如果错误请重复看以前流程,或参考其他文章,也可以联系我.

四、常用指令

hexo init       //在指定目录执行该命令,会将当前目录初始化为hexo站点,生成hexo站点所需的一切文件
hexo new “my new blog title”   //新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
hexo s --debug    // 启动本地hexo 服务器,默认localhost:4000可以访问
hexo clean      // 清除缓存,如对本地文件做了修改,同步到远程验证修改的效果之前,先clean,清除缓存
hexo generate   // 可以简写成hexo g 根据markdown文件生成静态文件
hexo deploy     // 或者简写成hexo d 将本地修改,部署到远端
hexo version    // 显示hexo版本

五、扩展项:如何更换主题

Hexo主题非常多,可以参考丰富多彩的Hexo主题,本文选Next为主题,NexT主题是一套简约的主题,设置完成之后,就像我的博客现在的样子,我用的是aria这个主题:https://github.com/AlynxZhou/hexo-theme-aria, 里面有详细的配置说明,这里就不重述了。

配置后调试:

hexo clean
hexo g
hexo s --debug

确认无误后上传:

hexo clean
hexo g
hexo d

六、开始写作

1. 创建一第一篇文章(可以规定文件名格式,修改_config.yml # Writing 下面的new_post_name: :year-:month-:day-:title.md )

$ hexo new "My New Post"

2. 创建标签,分类,先用以下指令建页面,然后再修改内容加上:type: "tags" comments: false, 在写文章时的头部都加上如下内容:

hexo new page tags
hexo new page categories
---
title: test-a
date: 2020-04-10 17:33:14
tags: test
categories: xxx
---

细心的朋友可能已经发现,这两个的设置几乎一模一样!是的,没错,思路都是一样的。所以我们可以打开scaffolds/post.md文件,在tages:上面加入categories:,保存后,之后执行hexo new 文章名命令生成的文件,页面里就有categories:项了。

scaffolds目录下,是新建页面的模板,执行新建命令时,是根据这里的模板页来完成的,所以可以在这里根据你自己的需求添加一些默认值。

七、Hexo去掉底部强力驱动及主题字样

1. 找到 \themes\next\layout_partials\下面的footer.swig文件,打开:

<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>
<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.{{ theme.scheme }}
  </a>
</div>

第一条是“由Hexo驱动” 的Hexo链接,把xml段删除,只留两个单引号''。

第二条是“主题-Next.XX”,将xml段都删掉,不留引号。

<div class="powered-by">
  {{ __('footer.powered', '') }}
</div>
<div class="theme-info">
  {{ __('footer.theme') }}
</div>

3. 找到这个地方themes/aria/languages/ 下面的语言文件zh_CN.yml(以中文为例):

footer:
  powered: "由 %s 强力驱动"
  theme: 主题

-、扩展项: 后续扩展不定时更新

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章