Utility

Linux下使用hexo创建静态博客并部署到github

这篇博客记录了在linux系统下，安装hexo及所需必要工具，并创建local博客，最终部署到远端如github的整个过程。

1. 安装必要工具

使用root权限

1
$ root -s

1.1 下载node.js (root)

下载node.js安装包到我的Applications目录，
解压并设置软连接

1
2
3
$ tar -xvf node-v10.16.0-linux-x64.tar.xz 
$ ln -s /home/YOURNAME/Applications/node-v10.16.0-linux-x64/bin/npm /usr/local/bin/
$ ln -s /home/YOURNAME/Applications/node-v10.16.0-linux-x64/bin/node /usr/local/bin/

检查是否安装好

1
2
$ node -v
$ npm -v

若无误，进行下一步。

1.2 安装hexo (root)

使用npm安装hexo

1
$ npm install -g hexo-cli

如果终端提示平台不兼容，忽略它。可以转到nodejs的bin目录下，hexo存在表示hexo已经下载好了。
建立软连接，后检查。

1
2
$ ln -s /home/YOURNAME/Applications/node-v10.16.0-linux-x64/bin/hexo /usr/local/bin/
$ hexo -v

当不能正常下载时，用cnpm下载，先下载cnpm：

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

只需将npm换为cnpm

若无误， 进行下一步。

2. 生成本地静态博客

初始化博客 (root)

在目录中新建一个存放所有blogs的目录, 并进入该目录，之后的所有操作都在其中。

1
2
$ mkdir blogs
$ cd blogs

第一次安装使用hexo需要初始化。初始化后该目录中回生成_config.yml, source 等文件。
开启本地服务。本地服务是用来显示blog的最终效果，并且可以及时修正。

1
2
$ hexo init
$ hexo server

使用终端给出的端口登录，可以看到hexo为我们创建的默认博客: Hello World。

当关闭本地端口后，用下面命令清理。尤其在页面显示不正常时

1
$ hexo clean

建立第一篇本地静态博客 (所有用户)

确保现在仍在blogs/目录中， 使用如下命令新建博客

1
$ hexo new "My_first_blog"

此时就可以在nvim(或vim)使用markdown写博客了

1
$ nvim source/_post/My_first_blog.md

当然可以转到My_first_blog.md 所在目录用其他编辑器写内容，但记得编辑结束后一定退回到blogs/目录。

确保仍在blogs/目录中，使用如下命令生成静态博客。

1
$ hexo generate

后开启本地服务。

1
$ hexo server

打开给出端口，可以显示所创建的静态博客。目前会有两篇博客: Hello World 和 My_first_blog。到此为止，本地静态博客已经成功初始化，并创建了自己的第一篇博客。

静态博客只是便于检查，修改博客。我们的目的是要把博客部署到服务上。

3. 部署到github (root)

这部分假设你已经有github账户，本地已经安装github，并可以熟练使用github。
如果未安装，安装

1
$ sudo apt-get install git-core

3.1. 为静态博客新建repository

新建repository并命名。个人博客的repo名是有规定的：OWNER.github.io，OWNER 一定是你的github账户名。点击create repository。此时一个空的repo建好了。不要关闭此页面。

3.2. 本地安装git插件并配置 (root)

确保现在仍在blogs/目录中, 如下命令安装插件，并忽略warning

1
$ npm install --save hexo-deployer-git

在_config.yml配置文件中添加第3.1步所建立空repo的信息。具体是在_config.yml
的文件尾的# Deplotment下添加repo和branch两行。注意冒号后有一空格。
更多细节参考官方主页

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/OWNER/OWNER.github.io.git
  branch: master

其中https://github.com/OWNER/OWNER.github.io.git 是第3.1步空repo的地址。OWNER是你的github账户名。

3.3. 部署本地静态博客 (root)

用下面命令执行部署(blogs/目录中)

1
$ hexo deploy

在终端提示处输入github的username和password
此时刷新第3.1步的页面，repo不再是空的了。

3.4. 访问

在浏览器输入OWNER.github.io即可从远端访问。
可能无法马上访问，稍等，刷新页面即可。

4. 部署后对博客的修改或新建 (root)

确保仍在blogs/目录中，创建新的博客后生成对应的.md文件。
对相应的.md文件添加或修改内容。
后在本地检查。

1
$ hexo server

本地检查无误后生成并部署到github

1
2
$ hexo generate
$ hexo deploy

或一条命令完成

1
$ hexo generate --deploy

5. 插入图片

  1. 修改配置文件_config.yml中post_asset_folder:的值设置为true。
  2. 回到blog/目录中，安装插件cnpm install https://github.com/7ym0n/hexo-asset-image --save。这个asset管理插件是没有bug的。
  3. 新建博客hexo new "xxx"。在/source/_posts文件夹内会生成xxx.md和同名的xxx文件夹。
  4. 把在xxx.md中要引用的图片放到xxx文件夹中。
  5. 在写博客过程中引入图片：

    <div align=center><img src="xxx/resnet.png" width=500></div>：在你的md编辑器中图片可以正常显示，但4000端口和github上不能显示。

    <div align=center><img src="resnet.png" width=500></div>：相反的，md编辑器中不能显示，远端可以。

    后者才是正确的引用。
  6. 回到blog/目录中，生成及部署hexo g --d。

6. 更改当前主题属性 (root)

以更改背景图片为例，保证当前目录为blog目录，图片存在于blog下的blog/themes/landscape/source/css/images/中，名为banner.jpg，选择自己喜欢的图片命名为banner.jpg并替换原来图片。在blog目录中开启服务hexo server。在localhost就可以看到变化。

若果要更改主题其他参数，回到上一级目录即blog/themes/landscape/source/css/编辑器打开目录中的_variables.styl文件。内容类似：

1
2
3
4
5
35 // Header
36 logo-size = 50px
37 subtitle-size = 16px
38 banner-height = 400px
39 banner-url = "images/banner.jpg"

修改对应参数值，后刷新localhost，就可以看到及时变化。

最后，回到blog/目录，执行一下命令保证github远端也得到更新：

1
2
$ hexo clean
$ hexo g --d

完成！

7. 添加“分类”和“tags” (root)

进入blog目录

  1. 在source中生成categories文件夹：tags是默认就含有的，不用添加。

    1
    $ hexo new page categories

  2. 编辑 blog/source/categories中index.md。添加type: categories于末行。保存并退出

    1
    2
    3
    4
    5
    ---
    title: categories
    date: 2020-01-11 17:48:47
    type: categories
    ---

  1. 给每一篇blog添加categories，如下。注意：hexo一篇文章只能属于一个分类，即如果在“- web前端”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- web前端”下的 “-xxx ”分类）。

    1
    2
    3
    4
    5
    6
    7
    8
    ---
    title: Linux(ubuntu)下使用hexo创建静态博客并部署到github
    date: 2019-07-28 12:36:32
    tags:
        - hahaha
    categories: 
        - utility
    ---

    最终blog每一页都会出现categories，tags和tag cloud三个标签。

8. 修改页面显示博客数 (root)

  1. 获取sudo权限并安装hexo的三个插件，archive的，tag的category的：

    1
    2
    3
    4
    $ sudo -s
    $ cnpm install hexo-generator-archive --save
    $ cnpm install hexo-generator-tag --save
    $ cnpm install hexo-generator-category --save

  2. 在目录/media/junhui/DATA/blog/下，编辑_config.yml，添加如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    archive_generator:
      enabled: true
      per_page: 0
      yearly: true
      monthly: true
      daily: false
      order_by: -date

    tag_generator:
      per_page: 0
      order_by: -date

    category_generator:
      per_page: 0
      order_by: -date

  3. 自定义对应的per_page数值。其中0表示显示所有blog，就是说，不分页。

9. Trouble Shooting

  1. 如果需要更改blog文件明，直接在源文件中修改即可。
  2. 对于已有的blog文件，只需要将源文件和其图片文件夹复制到blogs目录下。
  3. 当生成及部署完毕后，远端不会马上生效，不慌张，稍等。