博客建站

技术探索
🗨️字数统计=1.6k字 ⏳阅读时长≈6分钟

特别鸣谢

匠心零度：看了匠心零度的博客，我才下定决心要做一个自己的博客，理由太充分了。

小茗同学：博客的建立，基础的工作都是按照小茗同学的教程来做的，很详细。

徐靖峰：最终的博客主题确定为徐靖峰的博客主题，联系上后告知了相关主题以及主题出处。

最终效果

AaronYard：https://aaronyard.github.io/

欢迎各位来到我的博客考察~👏👏👏

准备工作

  • 在开始一切之前，你必须已经：

有一个github账号，没有的话去注册一个；

安装了node.js、npm，并了解相关基础知识；

安装了git for windows（或者其它git客户端）

配置好了相关的环境变量。

  • 本文所使用的环境：

Windows 10

node.js @12.13.1

Github Desktop @2.2.3

hexo @4.0.0

新建Github仓库

在Github中新建一个名为 你的用户名.github.io 的仓库，例如你的GitHub用户名为example，则仓库名为 example.github.io ，这样，将来你的网站访问地址就是 http://example.github.io 了。

配置SSH key

SSH key解决了本地和服务器的连接问题。

1
$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明你是第一次使用git命令行。不要着急，按照如下指令做。

1
$ ssh-keygen -t rsa -C "Github注册邮箱"

接着连续3次回车后，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的GitHub主页，进入个人设置 -> SSH and GPG keys -> New SSH key，title随意填写，将刚刚复制的内容粘贴到key中。

验证是否配置成功

1
$ ssh -T git@github.com // 注意邮箱地址不用改

在弹出的 Are you sure you want to continue connecting (yes/no)? 后输入yes。

若显示 Hi ***! You’ve successfully authenticated, but GitHub does not provide shell access. 则表明SSH配置成功。

接着输入如下指令

1
2
$ git config --global user.name "xxx"// 你的github用户名，非昵称
$ git config --global user.email  "xxx@xxx.com"// 填写你的github注册邮箱

如果遇到git非内外部指令的情况，则说明你没有为git配置环境变量，GitHub Destop的环境变量路径可参考：

1
C:\Users\AaronEN\AppData\Local\GitHubDesktop\app-2.2.3\resources\app\git\cmd

Hexo

类型：静态网页

特点：速度快、部署简单、免费、结合github pages、支持markdown、内容布局自定义功能强.

Hexo是一款基于node.js开发的博客程序，拥有简单的服务器，可用作简单的动态博客使用。也有生成器，生成的静态文件可以一键部署到Github Pages上，也可以部署到任意静态文件服务器上。它相当简约，并且可使用Markdown来编写文章！我的个人博客就是基于hexo生成的。很多网友对hexo的最深刻印象就是速度快和部署简单了。一个个人博客最核心的功能支持的非常好，你可以专心的写一些技术文章部署到上面了。

安装

1
$ npm install -g hexo

初始化

找个目录存放你的项目代码，例如我的是 D:\AaronYard 。

1
2
$ cd /d/AaronYard/
$ hexo init

初始化后的项目会自带一个主题，此时可以生成一个可以预览的网站。

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

在浏览器中输入 http://localhost:4000/，就可以浏览你的网站了。

主题

当然啦，我们并不满足于官方提供的主题，此时就可以去寻觅自己喜欢的主题啦。

官方提供的主题网站：https://hexo.io/themes/

我的网站的主题是hexo-theme-icarus

接下来就是下载主题的时刻啦！

1
2
$ cd /d/AaronYard/
$ git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/hexo-theme-icarus

下载的主题会放在themes目录下，修改根目录下_config.yml中的theme: landscape改为theme: hexo-theme-icarus，然后重新执行hexo g来重新生成。

注意主题中的_config.yml也是需要修改的，对此有点基础的摸索片刻后就会修改了。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。

提交GitHub

在辛苦并快乐着的搭建工作之后，就可以愉快的将博客提交到GitHub中了。

配置根目录下_config.yml中有关deploy的部分：

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

安装一个插件

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

提交本次改动的代码

1
$ hexo d

至此，个人博客的框架搭建完成，还需要内容的扩充。

写博客

定位到项目的根目录，输入命令

1
$ hexo new "hello-world"

hexo会帮我们在_posts目录下生成相关md文件
md文件的目录结构一般如下

1
2
3
4
5
6
7
8
---
title: postName #文章页面上的显示名称，一般是中文
date: 2019-11-24 13:44:07 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
---

以下是正文

编写md文件后执行hexo g与hexo s即可浏览博客，若满意就可以hexo d愉快的提交博客啦。

写博客的工具

关于写博客的工具，我用的是markdown editor，非常好用，左侧编写，右侧实时展现效果。编写的语法可参见hexo官方写作Wiki。

Hexo常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

#缩写
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

#组合命令
hexo s -g #生成并本地预览
hexo d -g #生成并上传

题外话

我博客右下方有一只unitychan，很有趣吧，是基于live2d技术做的，感兴趣的可以点击此处学习搭建。

分享到