VS Code + Github Pages + Hexo 写博客

发表于 更新于 Disqus：

2021年7月3日修改

准备工作

  1. 注册Github：建立一个Github repository放博客，reponsitory的名字要是XXX.github.io;
  2. 安装 VS Code;
  3. 安装 Node.js;
  4. 安装Git;
  5. 打开git bash设置SSH远程连接：
1
2
git config --global user.name "XXX"
git config --global user.email "XXX@gmail.com"

生成密钥：

1
ssh-keygen -t rsa -C"xxx@gmail.com"  #注意`C`后面没有空格。

如果不需要密码，连续三个回车，得到两个文件id_rsa和id_rsa.pub，位置：C:\Users\<用户名>\.ssh, 打开复制id_rsa.pub内容到 github上。

安装Hexo

新建一个BLOG文件夹并再VS Code中打开;
在VS Code的终端运行(Ctrl+` 快速打开VS Code TERMINAL)：

1
2
3
4
npm install hexo-cli -g
hexo init blog #新建名为blog文件夹并在里面安装博客框架
cd blog
npm install #安装所有依赖的包

编辑配置文件_config.yml：(注意这个是根目录下的，不是/them/next下的)

1
2
3
4
5
<!-- deploy:
type: git
repo: #这里填入你之前在GitHub上创建仓库的完整路径，记得加上 .git Example: <https://github.com/dustycn/dustycn.github.io.git>
branch: master #2020年10月1日之后推荐使用main取代master,避免歧视。 -->

安装部署Github插件

1
npm install hexo-deployer-git --save

绑定域名

  1. 申请一个新域名；
  2. 域名解析里面设置一个CNAME @，WWW，指向XXX.github.io,注意都要设置，这样不论新域名前带不带www都可以访问；当然，你也可以设置为一个二级域名，比如CNAME blog 指向 xxx.github.io;
  3. 进入https://github.com/XXX/XXX.github.io/settings/pages,设置custom domain(之前是进入blog所在的repository,setting页面，现在进入后会提示转到pages页面设置了)
  4. custom domain 填入新的域名，并勾选强制https,(如果不勾选，浏览器会提示不安全，如果你签名域名解析使用的A记录，不是CNAME,这里也要求你改成CNAME.)
  5. 进入本地blog/source文件夹下，新建一个CNAME不带扩展名的文件，直接再空白文件里面填入新域名，保存即可。注意新域名不要带www,否则访问的时候不带www无法访问。

安装主题

  1. cd进入blog文件夹下:
1
git clone https://github.com/next-theme/hexo-theme-next themes/next

注意，最早的版本是theme-next，但是原作者好久不更新了，next-theme的作者叶是大神，更新比较频繁，所以目前基本上都用next-theme下的hexo-theme-next了。

  1. 设置hexo配置文件_config.yml（根目录下）：
1
theme:next

测试本地blog已安装好了。

发布(n g d “三联”）

  1. hexo clean （如果显示正常不需要）
  2. hexo n(new) “blog article title”
  3. hexo g (generate)
  4. hexo s (server)
  5. hexo d(deploy)
  6. hexo new page “page title”

Hexo g和d可以一起使用：hexo g -d

发布图片

  1. 使用markdown paste插件插入的本地图片只能在首页显示；
  2. 有其它方式可以在文章中显示，是在每个发布的文章的文件夹中，建立相同文件名的文件夹存放该文章所用到的图片（待尝试）；
  3. 目前推荐使用picgo插件，直接上传到github，粘贴链接

模板修改

由于theme会经常更新，如果你直接改theme的配置文件_config.yml，更新的时候，你之前的设置就会被覆盖。解决方案：

  1. 在根目录下重新命名一个_config.next.yml的文件（next与theme同名）；
  2. 人工复制theme/next下的_config.yml的内容到新的_config.next.yml文件中，或者以下命令二选一：

Installed through npm 

1
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

Installed through Git 

1
2
cp themes/next/_config.yml _config.next.yml
theme_config

以后只在这个文件里面修改主题即可。

注意：YML语言的冒号后面要留一个空格。

升级主题

以下命令二选一：

Install the latest version throuth npm:

1
2
$ cd hexo-site
$ npm install hexo-theme-next@latest

update to the latest master branch:

1
2
$ cd themes/next
$ git pull

添加评论系统

我使用的是 <www.disqus.com>，注册后取得shortname后，变更hexo配置文件_config.yml：

1
2
3
4
disqus:
enable: true
shortname: dustycnblog
count: true

如果某个页面不需要显示评论，只需要再页面.md文件头部里面增加commens: false即可,比如，再tags页面不显示评论：

1
2
3
4
5
6
7
8
---
title: tags
date: 2021-07-03 09:22:32
type: "tags"
layout: "tags" 
comments: false
---

添加Github猫

方案一： 适用于所有网站

  1. 访问https://tholman.com/github-corners/#选择样式；
  2. 将以网站生成代码中href=”XXX”中的XXX换成你自己的网站；
  3. 将代码添加到：
    theme/next/layout/_layout.njk 文件中<div class="headband"></div> 下一行即可；

方案二： 模板自带功能

编辑 _config.next.yml文件，将 enable: 值改为true即可；

1
2
3
4
github_banner:
  enable: false
  permalink: https://github.com/XXX
  title: Follow me on GitHub

不过我个人用过一段时间弃用，使用Social里面的连接了。

开启文章打赏

编辑 _config.next.yml文件，将 .\themes\next\source\images里面的图片替换成你自己的收款码即可：

1
2
3
4
5
reward:
  wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

常见问题

❓ hexo d 后刷新网页没有效果
🗝️hexo clean,然后再hexo g, hexo d, 再清空浏览器缓存，等一会看看。

❓一篇文章如何添加多个标签
🗝️YML语言如下：

1
tags: [ 'Ruby', 'Perl', 'Python' ]

or:

1
2
3
4
5
tags:

- hexo

- disqus

个人倾向于第一种。

❓发布时提示错误 err: YAMLException: can not read a block mapping entry;
🔑文章开头的部分，：后面要有空格

title: JavaScript交作业：十进制数字转罗马数字
date: 2021-10-24 15:32:40
tags: JavaSrcipt