在github上搭建个人独立博客

这篇文章会给大家分享利用github pages搭建我的个人独立博客的过程。本文操作中所使用的操作系统为MacOS。

一、工具准备

1.下载nodejs

https://nodejs.org/zh-cn/download/
进入网站以后，根据自己的电脑系统，选择不同的平台下载。目前支持的主要平台是Windows,MacOS,Linux。下载的版本推荐是长期维护版，另外一个版本是最新尝鲜版，虽然包含了很多最新功能，但是有可能不太稳定，不太适合新人使用。

2.下载git

https://git-scm.com/downloads
进入网站以后，也是跟据自己的电脑系统选择相应平台。安装时基本就是按照它的提示，点击下一步即可。

3.测试安装结果

打开终端（Windows系统下需要管理员运行cmd），依次输入

1
2
3
node -v
npm -v
git -v

如果都能正常输出版本号，说明安装成功了，可以进入下一步操作。

4.安装hexo

1
npm install hexo-cli -g

这里比较旧的版本可能是npm install hexo -g，但是现在这个命令已经不用了

二、搭建仓库

1.注册登录github

登录成功以后，点击 Repositories -> New，进入新建仓库页面
在仓库名称处，输入 用户名.github.io (这里的用户名是你注册的用户名，一般是英文字母)
选择Public
选择Add a README file
最后，点击最下面的Create repository，完成仓库创建。

2.创建SSH key

打开终端，输入

1
ssh-keygen -t rsa -C "邮件地址"

然后连续4次敲入回车键，完成创建。
打开~/目录，寻找.ssh目录，这是一个隐藏目录，需要在Find中设置一下，把所有隐藏的目录显示出来才能看到。在Windows系统下的目录应该是C:\Users\用户名。
在.ssh目录中，以文本方式打开id_rsa.pub文件，并复制里面的内容。

然后打开github，点击右上角图形，在弹出菜单中选技Settings，进入设置页面。
选择SSH and GPG keys菜单，在SSH keys项上点击New SSH key，在弹出框中粘贴刚才id_rsa.pub的文件内容。

现在，可以测试一下是否成功了，在终端中输入

1
ssh -T git@github.com

回车，然后再输入yes。

三、在本地生成博客内容

1. 在本地电脑上建一个博客目录，比如~/blog/，在终端上进入这个目录，然后运行

1
hexo init

我在运行时，报了如下错误：

1
2
3
4
5
6
7
(node:67639) ExperimentalWarning: The fs.promises API is experimental
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
warning hexo-renderer-stylus > stylus > css > source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
error hexo@6.3.0: The engine "node" is incompatible with this module. Expected version ">=12.13.0". Got "11.13.0"
error Found incompatible module.
WARN  Failed to install dependencies. Please run 'npm install' in "/Users/tianlibin/blog" folder.

从错误信息上可以看出来，是我本地的node版本太低了，因为hexo要求node最低版本是12.13.0。升级了本机的node版本后，问题解决。

2. 运行

1
hexo generate

注：此命令可简写为 hexo g

3. 运行

1
hexo server

注：命令可简写为 hexo s
如果上述命令运行失败，有可能是国内与github的连接不太稳定，可以尝试重复几次，直到成功。
每次写好文章之后，也可以运行这个命令，来预览文章的效果。

hexo server命令运行成功后，输出如下：

1
2
3
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

在浏览器地址栏里打开 http://localhost:4000/ ，即可看到一个博客DEMO页面
可以按 control+C，结束服务。

4. 修改_config.yml

在博客目录下，找到_config.yml文件，找到 Site模块，修改

1
2
3
4
5
6
7
8
# Site
title: '给博客取个大标题'
subtitle: '给博客取个副标题'
description: ''
keywords:
author: 
language: en
timezone: ''

在这里可以修改网站的标题、副标题、描述、关健字、作者、语言等信息。

另外，找到最下面的Deployment模块
原始内容如下：

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

修改如下

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:xxx/xxx.github.io.git
  branch: main

这里有几点需要注意一下

  • type,repository,branch三个关健字，前面都有两个空格，冒号后面有一个空格，这里不能把空格删掉
  • type和branch后面的值都是固定的，repository后面的值，需要到github上找你创建的那个仓库，点击Code按钮，复制git的链接。（为了后面提交代码方便，尽量复制git链接，而不是https链接）

四、博客上线

1. 安装自动部署发布工具

1
npm install hexo-deployer-git --save

然后在终端依次输入

1
2
hexo g（生成）
hexo d（上传）

接下来我们就成功把本地内容上传到github了
上传成功以后，我们就算搭建好了！上自己的网址看看吧
网址是我们之前设的仓库名：用户名.github.io

2. 写文章

我们在Blog目录下，在终端中输入以下命令，就可以生成新的文章文件

1
hexo new 文章标题

文章是.md格式，在我们的Blog文件夹中的source/_posts中。
我个人是使用有道云笔记录来编辑md文件，支持所见即所得。

3. 上传文章

文章写好以后，还是输入，即可发布。

1
2
hexo g（生成）
hexo d（上传）

至此，我们就成功搭建好基本的博客了，剩下的就是对博客的一些优化和美化了。