青羽的博客

恭喜你发现了一个不为人知的小岛

一小时搭建完自己的个人网站

发表于 更新于 分类于

拥有自己的个人网站一直是我的一个目标。

在网上看了很多方法之后我最终选择了GitHub Pages + Hexo这条技术路线，原因有两点：

  • 完全免费，学生党没有多少钱。
  • 比较方便，有现成的框架可用。

整个搭建过程快的话半小时就可以搞定。

搭建完成后大概是这样子的：青羽的博客

1. 准备环境

准备一个GitHub账号：GitHub

新建一个Repositories，Repository name填 你的GitHub用户名.github.io

下载并安装NodeJS：Node.js

下载并安装Git for Windows：Git for Windows

2. 配置Git

鼠标右键打开Git Bash：

输入命令配置用户名和邮箱信息：

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件：

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

默认不设置密码，直接回车就行。

用文本编辑器打开生成的id_rsa.pub文件，Crtl+A，Ctrl+C复制全部内容。

打开GitHub的SSH设置页面：SSH and GPG keys

New SSH key，Title任取，Key粘贴刚刚复制的字符串，Add SSH key

3. 配置Hexo

Hexo是一个博客框架。接下来，开始安装Hexo。

选定一个文件夹作为存放博客文件的目录，在选定的文件夹内右键打开Git Bash，输入命令：

1
npm install hexo-cli -g

等待安装完成后，输入：

1
hexo init blog

这里的blog是用户自己取的一个站点目录名字。

初始化完成后进入站点目录并安装依赖：

1
2
cd blog
npm install

到这一步，本地博客算是搭建好了，测试一下：

1
hexo s

s是server的缩写，表示启动本地服务器。默认情况下，访问网址是：http://localhost:4000/

如果成功的话可以看见官方的默认页面：

4. 部署网站

在站点目录下可以看到有如下文件：

其中_config.yml为站点配置文件，用文本编辑器打开，Crtl+F查找 url 字段，修改为：

1
url: https://你的GitHub用户名.github.io/

再翻到最后找到 deploy 字段，修改为：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/你的GitHub用户名/你的GitHub用户名.github.io.git
  branch: master

上面的 repo 字段的值可以直接从GitHub仓库复制：

部署之前要先安装Git部署插件，输入命令（注意：之后的命令均在站点目录下执行）：

1
npm install hexo-deployer-git --save

最后，输入命令：

1
2
hexo clean 
hexo g -d

g是generate的缩写，表示生成静态文件；d是deploy的缩写，表示部署到网站上。

打开浏览器，输入你的网站地址：https://你的GitHub用户名.github.io/，就可以看到你的网站已经上线了，大功告成！

5. 发布文章

在命令行中输入：

1
hexo n "HelloWorld"

n是new的缩写，表示新建一篇文章。

就可以看到在source/_posts目录下多了一个HelloWorld.md文件，这就是一篇文章的源文件了。写完之后生成、部署即可。

文章使用Markdown写成，关于Markdown可参考：Markdown 教程 | 菜鸟教程

要删除文章的话，直接把源文件删除即可（确保至少有一篇文章存在，否则可能出错）。

6. 优化网站

1. 更换主题

Hexo有许多好看的主题，这里以我用的NexT主题为例讲解怎样更换主题：

  1. 下载主题：Releases · theme-next/hexo-theme-next
  2. 解压所下载的压缩包至站点的 themes 目录下，并将解压后的文件夹名称（hexo-theme-next-x.x.x）更改为 next
  3. 打开站点配置文件_config.yml，找到 theme 字段，并将其值更改为 next ；找到 language 字段，并将其值更改为 zh-CN（在themes/next/languages目录下可查看主题支持的语言）
  4. 在切换主题之后， 我们最好使用 hexo clean 命令来清除 Hexo 的缓存

在更换了主题之后界面美观了许多，终于可以舒舒服服地写文章啦~

但是很不好意思，倘若你的文章里有LaTeX公式或者图片，你会发现显示不正常……

作为一名技术宅，文章里怎么可能不用公式不用图片嘛，这两个坑必须解决了！

2. 插入LaTeX公式

更换支持LaTeX公式的Markdown渲染器：

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

打开主题配置文件（themes/next/_config.yml），找到 math 字段，修改为：

1
2
3
math:
  enable: true
  per_page: false

至此，LaTeX公式插入问题解决！

3. 插入图片

首先打开站点配置文件_config.yml，找到 post_asset_folder 字段，并将其值更改为 true ，这样新建文章的同时Hexo会自动在同目录下新建一个以文章名命名的空文件夹以方便存放该文章要用到的资源。

安装一个能上传本地图片的插件：

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

假设在

1
2
3
4
5
+---HelloWorld
|   +-- 1.jpg
|   +-- 2.jpg
|   +-- 3.jpg
+---HelloWorld.md

这样的目录结构（目录名和文章名一致）中，在文章源代码里只要使用形如 ![](HelloWorld/1.jpg) 这样的语句就可以插入图片了~

4. 更多

关于Hexo框架的更多信息请参考：Hexo

关于NexT主题的更多信息请参考：NexT - Theme for Hexo