折腾笔记博客搭建

使用hexo搭建个人wiki

Catalogue
  1. 1. Hexo及其环境的安装
  2. 2. 初始化hexo文件夹：
  3. 3. hexo的快速入门
    1. 3.1. 创建新文章
    2. 3.2. 运行服务器
    3. 3.3. 生成静态文件
    4. 3.4. 部署到远程站点
  4. 4. Hexo安装Wikitten主题：
  5. 5. 一些个人定制化配置（可选）
    1. 5.1. 修改代码块颜色
    2. 5.2. 启用资源文件夹
    3. 5.3. 部署到Github Page
      1. 5.3.1. 手动部署
        1. 5.3.1.1. github创建github page仓库
        2. 5.3.1.2. 配置部署到github
      2. 5.3.2. 免密码部署设置
      3. 5.3.3. 使用脚本一键部署
      4. 5.3.4. 设置自定义域名
      5. 5.3.5. 自动化部署到Github Page
  6. 6. 参考资料

Hexo及其环境的安装

安装Hexo需要Node.js和Git环境，Hexo安装方法和过程参考官方文档

初始化hexo文件夹：

1
$ hexo init <floder_name>

初始化完成后，文件夹结构如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中_config.yml为站点配置文件，themes为主题文件目录

hexo的快速入门

创建新文章

1
$ hexo new "My New Post"

More info: Writing

运行服务器

1
$ hexo server

More info: Server

生成静态文件

1
$ hexo generate

More info: Generating

部署到远程站点

1
$ hexo deploy

More info: Deployment

PS：Hexo建站各种基本使用方法请参考官方文档

Hexo安装Wikitten主题：

PS:这里主题使用相关内容均来自Wikitten主题的文档

安装过程如下：

  1. 进入你的hexo文件夹，将主题克隆到themes/路径下

    1
    2
    $ cd your-hexo-directory
    $ git clone https://github.com/zthxxx/hexo-theme-Wikitten.git themes/Wikitten

  2. 覆盖站点目录中的默认页面模板

    1
    2
    $ cp -rf themes/Wikitten/_source/* source/
    $ cp -rf themes/Wikitten/_scaffolds/* scaffolds/

  3. 重命名主题中的 _config.yml.example 到 _config.yml，然后可以使用配置文件配置主题

    1
    2
    3
    $ cp -f themes/Wikitten/_config.yml.example themes/Wikitten/_config.yml
    # 编辑配置文件，定制你的配置项
    $ vim themes/Wikitten/_config.yml

  4. 安装插件

    1
    2
    3
    4
    5
    hexo-autonofollow	    // 打开非本站链接时自动开启新标签页
    hexo-directory-category // 根据文章文件目录自动为文章添加分类
    hexo-generator-feed	    // 生成 RSS 源
    hexo-generator-json-content	// 生成全站文章 json 内容，用于全文搜索
    hexo-generator-sitemap	// 生成全站站点地图 sitemap

    安装命令：

    1
    $ npm i -S hexo-autonofollow hexo-directory-category hexo-generator-feed hexo-generator-json-content hexo-generator-sitemap

到这里我们的个人wiki版的hexo站点已经可以运行了，接下来我们需要做一些定制化的配置：

  1. 添加插件的配置内容：向站点配置文件（hexo根目录下的_config.yml文件）最后添加如下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    ## Markdown
    ## https://github.com/hexojs/hexo-renderer-marked
    marked:
      gfm: true
      
    ## Plugins: https://hexo.io/plugins/
    ### JsonContent
    jsonContent:
      meta: false
      pages:
        title: true
        date: true
        path: true
        text: true
      posts:
        title: true
        date: true
        path: true
        text: true
        tags: true
        categories: true
      ignore:
        - 404.html
        
    ### Creat sitemap
    sitemap:
      path: sitemap.xml

    ### Adds nofollow attribute to all external links in your hexo blog posts automatically.
    nofollow:
      enable: true
      exclude:
        - <your site url domain> # eg: zthxxx.me

到这里，我们的wikitten主题的hexo站点已经成功搭建完成

一些个人定制化配置（可选）

修改代码块颜色

这个主题启用之后，默认代码块的背景颜色是黑色，纯白色的背景配纯黑的代码块背景颜色有点看着不舒服，所以我想将代码块颜色进行修改。

  1. 找到主题配置文件找到如下行：

    1
    highlight: monokai

  2. 将monokai改成自己想要的主题即可，本站使用的风格是``

PS：可用主题名称可于Wikitten/source/css/_highlight目录下找到，highlightjs网站可进行在线预览。

启用资源文件夹

编写.md格式文档过程中，图片的插入是个问题，我们可以引用外部链接，也可以使用本地图片，如果不想使用远程图床的话，这里启用资源文件夹更加便于在文档中插入图片

在站点配置文件夹中，找到如下配置选项，将false改为true即可

1
post_asset_folder: false

接下来使用命令(hexo new title)创建新文档的时候，就会自动创建一个资源文件夹

PS：由于之前开启了自动以文件夹来创建分类，所以我们使用资源文件夹的时候，文件夹里不要出现.md文件，不然文件夹也会被认为是一个文章分类

部署到Github Page

手动部署

这里有两个地方要操作，一个是github，一个是本地配置文件

github创建github page仓库
  1. 创建github账号
  2. 创建个人仓库，仓库名为用户名.github.io
配置部署到github

  1. 安装 hexo-deployer-git

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

  2. 编辑站点配置文件，找到如下内容：

    1
    2
    3
    4
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: ''

    按照如下格式进行修改：

    1
    2
    3
    4
    deploy:
      type: git
      repo: <repository url> 
      branch: master

    repo：github仓库的url（例如:https://github.com/username/username.github.io.git）

    branch：分支名称(一般是master)

  3. 然后使用如下命令进行部署

    1
    $ hexo clean && hexo g && hexo d

    命令执行完成后会提示你输入github账号密码，输入完即完成了提交

接下来可从username.github.io访问到自己的博客了

免密码部署设置

  1. 创建SSH密匙

    1
    ssh-keygen -t rsa -C "GitHub 邮箱"

  2. 复制公钥（生成的.pub的文件）的内容到github–setting–SSH and GPG keys中（标题随便起）

  3. 修改站点配置文件，将前面我们的repo改成ssh地址，格式例如：

    1
    2
    3
    4
    deploy:
      type: git
      repository: git@github.com:myname/myname.github.io.git 
      branch: master

  4. 然后我们再次使用hexo d进行部署，就不再需要我们填写用户名和密码了

使用脚本一键部署

每次部署都需要三条命令，过于麻烦，我们可以写个脚本将三条命令进行简化

以下脚本均放在站点主目录下

shell脚本

1
2
#!/bin/bash
hexo clean && hexo g && hexo d

python脚本

1
2
3
4
5
#!/usr/bin/python3
import os
os.system('hexo clean')
os.system('hexo g')
os.system('hexo d')

设置自定义域名

我们也可以使用我们自己的域名来访问我们的博客，首先，我们需要先注册一个域名（比如，可以去腾讯云注册）

然后在我们博客的github仓库设置自定义域名为我们想要访问解析的域名，同时在我们注册域名的地方设置CNAME解析地址为:username.github.io.

稍等片刻即可通过自定义域名访问博客了

不过这里会出现一个问题就是每次部署都会导致CNAME信息需要重新设置，这里我们需要在站点主目录的source目录下创建个CNAME文件，里面写上自己要解析的地址即可

自动化部署到Github Page

使用Travis CI 将 Hexo 博客部署到 GitHub Pages 上可实现自动化部署，只需要我们将站点文件push到github上，即可自动部署成博客

如果不希望自己的站点文件公开的话，还是建议使用上面的手动部署方法

详细教程请参考hexo相关文档

More info: deploy to github page

参考资料