这里简单记录这个博客的搭建过程，使用Hexo结合GitHub Pages搭建，NexT主题，关于Hexo: https://hexo.io/zh-cn/docs/

介绍

【有待补充】

Hexo 是一款基于 Node.js 的静态博客框架，可以将生成的静态网页托管在 GitHub 上，当然也可以托管在 coding.net 上，后者国内访问速度快些，与此同时由于某些原因GitHub屏蔽了百度爬虫，托管于GitHub仍需额外的操作。

搭建之前

准备工作 - 工具

之后需要用到命令行，Windows可以Shift + 鼠标右键在当前本文件夹下打开Power shell或是命令提示符，也可以用另外的工具，比如Cmder，当然，Cmder完整版下已经集成了git工具，就不需要安装Git了。

注册 GitHub账户

注册名username稍后与默认的博客一致，比如是这样的：https://username.github.io/，当然也可以填写自己申请的域名。

注册账户后，可以新建一个仓库（repository），仓库名为username.github.io，这仓库存放的也就是博客相关的文件。

本地构建

  • 安装Hexo
    在命令行下输入npm install -g hexo-cli，

    npm也就是Node.js的包管理器（package manager）

  • 创建本地库
    hexo init username.github.io 本地创建一个文件夹
    cd username.github.io 进入这一目录

  • 安装主题
    这里安装的是NexT主题，https://github.com/theme-next/hexo-theme-next
    输入：git clone https://github.com/theme-next/hexo-theme-next themes/next
    下载太慢也可以GitHub上下载后解压到themes文件夹下

  • 安装依赖模块
    npm install

  • 安装自动部署发布工具 hexo-deployer-git
    npm install hexo-deployer-git --save

  • 主题配置
    在配置文件/username.github.io/_config.yml中的theme下填入next（旧版填入next，6.x版next-reloaded可以切断，theme:之后一定要注意有个空格）

    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next-reloaded

    关于NexT主题的细节配置可以见这里（比如侧边栏、icon、头像这些）：
    http://theme-next.iissnan.com/getting-started.html
    主题配置文件在这里：/username.github.io/themes/next-reloaded/_config.yml

    配置文件需要的修改：

    1
    2
    3
    4
    5
    6
    7
    title: Your Blog‘s Name
    subtitle:
    description:
    keywords:
    author: Your Name
    language: zh-Hans # 主题NexT升级6.x之后需要改为zh-CN
    timezone: Asia/Shanghai	#时区

本地预览+测试调整

  • 先写一篇
    hexo new "filename" 新建一篇，文件会放在这里：/username.github.io/source/_posts，我们可以使用一款markdown编辑器来编辑markdown文件
    1
    2
    3
    4
    5
    6
    7
    ---
    title: file-test
    date: 2019-01-01 00:00:00
    tags: [tag1, tag2]
    ---
    # title 1
    The quick brown fox jumps over the lazy dog.
  • 测试/预览
    hexo s
    1
    2
    3
    $ hexo s
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
    这时可以在浏览器输入http://localhost:4000预览

发布到GitHub

按上述Press Ctrl+C to stop.之后：

在配置文件之后加入：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

依次输入三条命令：

1
2
3
hexo clean
hexo g
hexo d

其中第一次输入hexo d之后会弹出GitHub登录窗口，以后写博客只需hexo g、hexo d
此时访问https://username.github.io/ 便可以看到博客了

注：hexo clean=清除缓存文件 (db.json)和已生成的静态文件(public)
​ hexo g=hexo generate，生成静态文件
​ hexo d=hexo deploy，部署网站
​ 更多hexo命令参考：https://hexo.io/zh-cn/docs/commands.html

继续设置

到这里基本就大概有个可以看的框架了

  • 添加评论系统： Valine+Leancloud，参考sjf0115[1]

日常操作

a. 写作、发布 hexo g 、 hexo d
b. 新建页面 hexo n "filename"
c. 新建草稿 hexo new draft "filename"
d. 发布草稿 hexo publish [layout] <filename>

搜索引擎

百度

  • baidu_url_submitter
  • 手动推送

这一部分参照了资料[2][3]

Google Adsense

注意验证的手机号前加+86，例如+8618812345678

使用的插件

1
2
3
4
5
6
7
8
npm install hexo-blog-encrypt --save
npm install hexo-baidu-url-submit --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-searchdb --save
npm install hexo-generator-feed --save
npm install hexo-reference --save
npm install hexo-asset-image --save    # npm audit产生一个名为lodash的vulnerability

足迹地图

百度地图和高德地图都有点亮城市和足迹打卡的功能，但总有「或多或少」的痛点：要么高铁上打开地图点亮了一串城市，要么就没开地图错过了打卡 （这个貌似有补救的方法）。所以有个自己可以完全控制的足迹地图就很有必要了，这里的方案抄自percent4。

抄作业过程中遇到了 ImportError: cannot import name ‘Iterable‘ from ‘collections‘，根据提示找到 pyecharts中的文件修改 from collection import Iterable 为 from collections.abc import Iterable 即可。

将生成的 html 文件放入 hexo\public\travel\ 就可以访问了。

参考资料

【见尾注】

  1. 1.http://smartsi.club/add-a-comment-function-to-the-next-theme-of-hexo.html ↩
  2. 2.Hexo插件之百度主动提交链接 ↩
  3. 3.hexo的SEO方法 ↩