lqid's blog

在 github 上用 hexo 搭建个人博客

发表于 更新于 分类于 ， ，

这篇文章好多地方已经过时啦！

首先感谢基鹏发给我相关的攻略, 我基本是根据这篇攻略操作的, 但是有很多东西我需要自己安装。而且主题我没有按照攻略里的, 自己选择了 next 主题。
https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html

一 Github 仓库设置

根据 Github 官方给的教程
https://guides.github.com/features/pages/
注册好 github 后选 New repository, 仓库名为 username.github.io (where “username” is your actual GitHub user name)

二 配置 SSH key

https://help.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh
去先下载git, https://git-scm.com/downloads
用 git bash 输入

1
$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

然后一路回车, 打开 .ssh\id_rsa.pub, 复制里面的内容添加到 Github 的设置页面里。

可以用

1
$ ssh -T git@github.com

测试 SSH key 是否添加成功。

三 安装 hexo

到 https://nodejs.org/en/ 安装 node.js, 最好是选 recommended for most users 这个版本

安装完 node.js 之后就可以安装 hexo 了

1
$ npm install -g hexo

用 git bash cd 到一个空文件夹, 输入

1
$ hexo init

在這個文件夹里初始化一个博客。

接着就可以用这两个命令预览

1
2
$ hexo g # 生成
$ hexo s # 启动服务

hexo g 会生成一个public文件夹, hexo s 能让电脑通过 http://localhost:4000访问本地博客

四 next 主题

在本地博客主目录下安装 next 主题
http://theme-next.iissnan.com/
用 git bash 输入

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

然后就根据官方使用文档自定义一些外观。
我比较喜欢 Piscess 這個 Scheme, 就把 scheme: Muse 前面加上 # 注释掉, 把 scheme: Pisces 前面的 # 去了。

五 上传到 Github

用 hexo s 预览好博客之后就可以上传到 Github 了。
首先安装插件

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

然后在博客主目录下的 _config.yml 最后把 deploy 的参数改好

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

然后用 hexo d 就可以把有改动的代码提交到 Github 上的仓库。
等1, 2分钟就可以在 https://lqid1998.github.io 里看到配置好了的博客了。

六 写作方法

这里参考了 https://www.jianshu.com/p/56d99a3049a5 这篇博文, 就当做个总结

1. 新建文章

首先在 _config.yml 中把 post_asset_folder:false 改成 true , 这样方便后续添加图片等东西, 然后用命令

1
$ hexo new post \<title>

创建一个新的页面, 用文字编辑器打开 \<title>.md 就可以写作了。

在顶上的 tags 栏可以加多个 tag

1
tags: [tag1,tag2,tag3]

2. 图片

首先安装插件

1
$ npm install https://github.com/CodeFalling/hexo-asset-image --save

然后就可以把图片放在和 <title>.md 同目录下的同名文件夹, 如 picture.png 就可以用下面的代码添加图片, [alt] 是图片的文字描述。

1
![alt](/picture.png)

3. 斜体和粗体

写法

1
2
3
4
*这是斜体* 或 _这也是斜体_ 
**这是粗体**
***这是加粗斜体***
~~这是删除线~~

效果
这是斜体 或 这也是斜体
这是粗体
这是加粗斜体
这是删除线

4.分级标题

写法

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

5.插入代码

反引号可以引用只有一行的代码 比如 `114514` 效果 114514
如果分多段可以用這個

1
2
3
{% codeblock %}
114514
{% endcodeblock %}

效果

1
114514

目前就先写到这了, 如果新学了什么写法的话我就会更新在后面, 如果加个多也考虑分出一篇博文专门总结写作格式。这样就不用一边 Google+Baidu 一遍码字了。

19/06/2020 温州, 隔离中