思无邪

个人博客 | 学习，思考，分享

0%

基于Hexo搭建个人博客

发表于 更新于 分类于

如果你要搭建个人博客网站，更注重内容的输出，而不是把时间花在网站的维护上，那么，通过Hexo来构建个人博客网站是一个很不错的选择。

前言

Hexo 是一个基于 Node.js的快速、简洁且高效的博客框架，通过 Hexo 你可以轻松地使用 Markdown 编写文章，除了 Markdown 本身的语法之外，还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。

准备工作

准备工作主要配置相关环境和基本要求，新手建议在安装或注册账号时先使用搜索引擎了解详细的安装配置方法，避免后续出错。

GitHub账号

如没有使用过GitHub，前往GitHub注册一个账号，并了解下GitHub基本信息 ，此处省略...

安装git

  • Windows：下载并安装 git 。
  • Mac：使用 Homebrew, MacPorts ：brew install git;或下载 安装程序 安装。
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core

检验是否安装成功： $ git version

安装Node.js

去 Node.js 官网下载所需系统的安装包，并根据提示安装即可。Node.js版本及对应的hexo版本如下：

Hexo 版本 最低兼容 Node.js 版本
5.0+ 10.13.0
4.1 - 4.2 8.10
4.0 8.6
3.3 - 3.9 6.9
3.2 - 3.3 0.12
3.0 - 3.1 0.10 or iojs
0.0.1 - 2.8 0.10

检验是否安装成功： $ node -v

安装hexo

上述两个必备程序安装成功之后，只需要通过npm便可以完成Hexo的安装了。 $ npm install -g hexo-cli 至此，完成环境配置。

本地部署

本地初始化

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

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

本地目录结构

新建完成后，指定文件夹的目录如下：

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

网站的 配置 信息，您可以在此配置大部分的参数。

  • package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package.json{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}
  • scaffolds

模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

  • source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

  • themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

启动本地服务

在指定文件夹下，执行以下命令

1
2
hexo g   //或者hexo generate 
hexo s   //或者hexo server，可以在http://localhost:4000/ 查看

hexo s是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容。到这里，本地的一些基本部署就基本完成了，接下来将本地部署推送至github，并通过访问github静态页面显示。

远程部署

创建仓库

新建一个名为username.github.io的仓库，创建成功后，默认会在你这个仓库里生成一些示例页面，以后你的网站所有代码都是放在这个仓库里。

绑定域名

配置SSH key

首先在本地创建ssh key：

1
ssh-keygen -t rsa -C "your_email@youremail.com"

后面的your_email@youremail.com改为你在github上注册的邮箱，之后会要求确认路径和输入密码，我们这使用默认的一路回车就行。成功的话会在~/(windows路径：/c/Users/username/)下生成.ssh文件夹，进去，打开id_rsa.pub，复制里面的key。

回到github上，进入 Account Settings（账户配置），左边选择SSH Keys，Add SSH Key,title随便填，粘贴在你电脑上生成的key。

为了验证是否成功，在git bash下输入：

1
$ ssh -T git@github.com

如果是第一次的会提示是否continue，输入yes就会看到：You've successfully authenticated, but GitHub does not provide shell access 。这就表示已成功连上github。

接下来我们要做的就是把本地仓库传到github上去，在此之前还需要设置username和email，因为github每次commit都会记录他们。

1
2
$ git config --global user.name "your name"
$ git config --global user.email "your_email@youremail.com"

远程推送

安装 hexo-deployer-git。

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

修改配置本地配置文件_config.yml。

1
2
3
4
5
deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

Hexo 提供了快速方便的一键部署功能，让您只需一条命令就能将网站部署到服务器上。

1
2
3
hexo clean
hexo generate
hexo deploy

其中， hexo clean清除了你之前生成的东西，也可以不加。 hexo generate 顾名思义，生成静态文章，可以用 hexo g缩写。

hexo deploy 部署文章，可以用hexo d缩写。

现在，在浏览器中输入username.github.io，便可以打开网页了。接下来，需要对hexo进行基本配置和主题配置。

配置

基本配置

这部分网上有很多写的比较好的，详见附录参考。

主题配置

Hexo提供多种主题配置，参见hexo官网主题界面，这里配置的是Next主题，简洁才是最美的。在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。

下载主题

如果你熟悉 Git， 建议你使用 克隆最新版本 的方式，之后的更新可以通过 git pull 来快速更新， 而不用再次下载压缩包替换。

在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：

1
2
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。

启用 NexT 主题

1
theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。 在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。 当命令行输出中提示出：

1
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse

现在，你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。

文件组成

包含主题文件，整个hexo文件结构目录如下：

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
.
├── .deploy_git/			#远程部署
├── node_modules/			#第三方插件
├── public/					#html源码，hexo g生成
├── scaffolds/				#模板
|   ├── draft.md			#草稿
|   ├── page.md				#页面
|   └── post.md				#文章
├── source/					#个人资源
|   ├── _posts/				#存放个人文章
|   ├── about/				#后面是一些自定义文件夹
|   ├── categories/
|   ├── life/
|   ├── reading/
|   ├── skill/
|   ├── tags/
|   └── Tao/
├── themes/					#主题
|   ├── landscape/
|   └── next/				#next主题
|       ├── languages/
|       ├── layout/
|       ├── scripts/
|       ├── source/
|       ├── test/
|       ├── package.json
|       └──_config.yml		#主题配置文件
├── package.json
└── _config.yml				#站点配置文件

Next主题目录如下：

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
34
35
36
37
38
├── .github                #github信息
├── languages              #多语言
|   ├── _en.yml            #默认语言
|   └── zh-CN.yml          #简体中文
|   └── zh-TW.yml          #繁体中文
├── layout                 #布局，根目录下的*.swig文件是对主页，分页，存档等的控制
|   ├── _custom            #可以自定义的模板，覆盖原有模板
|   |   ├── head.swig      #文首样式
|   |   ├── header.swig    #头部样式
|   |   ├── sidebar.swig   #侧边栏样式
|   ├── _macro             #可以自定义的模板，覆盖原有模板
|   |   ├── post.swig      #文章模板
|   |   ├── reward.swig    #打赏模板
|   |   ├── sidebar.swig   #侧边栏模板
|   ├── _partial           #局部的布局
|   |   ├── head           #头部模板
|   |   ├── search         #搜索模板
|   |   ├── share          #分享模板
|   ├── _script            #局部的布局
|   ├── _third-party       #第三方模板
|   ├── _layout.swig       #主页面模板
|   ├── index.swig         #主页面模板
|   ├── page               #页面模板
|   └── tag.swig           #tag模板
├── scripts                #script源码
|   ├── tags               #tags的script源码
|   ├── marge.js           #页面模板
├── source                 #源码
|   ├── css                #css源码
|   |   ├── _common        #*.styl基础css
|   |   ├── _custom        #*.styl自定义局部css
|   |   └── _mixins        #mixins的css
|   ├── fonts              #字体
|   ├── images             #图片
|   ├── js                 #javascript源代码
|   └── lib                #引用库
├── _config.yml            #主题配置文件
└── README.md              #说明文件

可以根据自己的需要进行适当修改。

选项配置

在配置Next主题时一些细节已经遗忘，主要是参照参考项中一些博客，可根据个人需求进行配置，以下简单列举在配置主题时的一些设置项：

  • 页面&菜单布局

    采用Next主题中的Gemini布局，菜单栏在侧栏，主题配置文件如下

    1
    2
    3
    4
    5
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

    菜单中含几个类别，我想把不同的文章归类在不同类别下显示，总的目录是categories/，比如新建一个类别skill，则在主题配置文件中修改如下：

    1
    2
    3
    menu:
      home: / || fa fa-home
      skill: /categories/skill/ || fa fa-arrow-down

    在-CN.yml文件中修改中文映射，这样在主页时就会按映射的中文显示

    1
    2
    3
    4
    menu:
      home: 首页
      categories: 分类
      skill: 问术

    然后在根目录，并在该目录生成文件index.md

    1
    2
    3
    title: 问术
    layout: "skill"
    comments: false

    这样，点击主页的“问术”按钮，则会显示skill分类页面

  • 网站映射

    通过上述方式创建的skill页面的网址链接中会存在中文符，为了改成英文，在根目录下的站点配置文件中修改映射值，将链接中的中文映射为英语，这样就不会乱码了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Category & Tag
    default_category: uncategorized
    category_map:
      问术: skill
    tag_map:
      #算法
      算法: algorithm
      滤波: filter
      点云: point cloud

  • 文章模板配置

    以下是post模板，其中，公式采用mathjax渲染，增加来显示摘要。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    ---
    title: {{ title }}
    urltitle: 
    date: {{ date }}
    update: 

    top: false
    toc: true
    comments: true
    mathjax: true

    keywords: 
    description:
    tags: 
    categories:
    - 111
    - 222
    - 333

    ---

    摘要显示....

    <!-- more -->

  • 公式

    首选，安装pandoc，然后，卸载hexo默认的markd，安装hexo-renderer-pandoc

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-pandoc --save

    安装hexo-math 插件以支持 latex 公式

    1
    npm install hexo-math --save

    在hexo 博客中的 _config.yml 中添加 hexo-math 插件

    1
    2
    3
    4
    5
    6
    7
    8
    markdown:
      plugins:
        - markdown-it-footnote
        - markdown-it-sup
        - markdown-it-sub
        - markdown-it-abbr
        - markdown-it-emoji
        - hexo-math

    打开 theme/next/_config.yml 文件，找到mathjax 位置, 设置为以下

    1
    2
    3
    4
    # MathJax Support
    mathjax:
      enable: true
      per_page: true

  • markdown插入图片

    首先，修改站点配置文件_config.yml中的post_asset_folder: true

    然后，使用typora编辑MarkDown文件，并在图片设置项选择“复制到指定路径”，./${filename}

    最后，使用hexo new “我的博客”，在文章目录创建新文章，并且创建同名文件夹存放图片

日常写作

  • 新建文章

    1
    hexo new [layout] <title>

    在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

  • 生成静态文件

    1
    $ hexo g

  • 服务器查看更新

    1
    $ hexo s

  • 远程部署

    1
    hexo d

参考