ubuntu系统中利用 github page+hexo搭建blog

发表于 更新于 分类于 阅读次数：
记录在ubuntu子系统中首次搭建blog，使用annie主题美化

一、前言

1、为什么搭blog？
想有一个自由却又严谨的空间，认真的做笔记、记录成长、好好学习的空间。混乱的脑子与头绪需要理清，生活也需要有一个认真记录的地方。希望从今开始认真的生活，努力的朝着自己的梦想前行。

2、此文为本胖记录自己搭建blog所踩过的坑，所以本文是按照本胖踩坑顺序所写。另外本胖电脑安装了ubuntu子系统，所以下文所安装的软件全是linux系统中安装的，超简单的命令行安装可以说是超级友好了。

二、git相关

git入门相关资料：Pro Git（中文版）、Git菜鸟教程、Github 简明教程

2.1 注册github账号

在github官网上注册账号

2.2 客户端安装git

ubuntu客户端下载安装git，并与github连接

1
2
3
4
5
6
7
8
9
10
11
#安装git
sudo apt install git
#将git与github账号绑定
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
#生成ssh公私钥文件以便连接github
#确保回到家目录
cd ~
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
#创建私钥过程中直接回车，按照默认配置生成ssh公私钥文件
#在~/.ssh/文件夹中找到刚刚所创建的ssh公私钥，pub后缀的为公钥，下一步中需要将其中内容复制到github中

2.3 将ssh公钥放入github

打开github的setting key页面，将刚刚创建的公钥中的文本内容复制进key的文本框中，如下图所示

1

输入ssh -T git@github.com测试是否配置成功，若出现如下字样则说明配置成功

2

2.4 创建个人仓库

在github新建个人仓库，命名规则为用户名.github.io，例如本胖叫peana，则项目名为peana.github.io。这也是日后本胖博客的URL，创建方式如下图所示

3
4

三、安装node.js及hexo

3.1 安装node.js

1
2
3
4
5
6
7
8
9
10
11
12
#安装nodejs 9.x版本
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs
#检查node版本
node -v
#将node和npm设置为全局
sudo ln /home/ubuntu/node-v8.11.1-linux-x64/bin/node /usr/local/bin/node
sudo ln /home/ubuntu/node-v8.11.1-linux-x64/bin/npm /usr/local/bin/npm
#安装n模块，将node升至最新稳定版
npm install-g n
n stable
node -v #检查当前node版本

3.2 安装hexo

1
2
3
npm config set registry http://registry.npm.taobao.org          //由于国外npm源网速过慢，建议更换为国内源
npm config list               //查看换源是否成功
npm install -g hexo-cli

3.3 初始化博客

安装hexo完成后即可初始化本胖的博客了

1
2
#在家目录下新建一个blog文件夹以完成hexo的初始化，文件夹无需自己创建，以下命令会自动创建
hexo init ~/blog

检测博客是否搭建成功

1
2
3
4
hexo generate         //生成静态文件,该命令可以简写为hexo g                
hexo server           //启动服务器。默认情况下，访问网址为：http://localhost:4000/，该命令可以简写为hexo s 。
hexo deploy           //部署网站
hexo clean            //清除本地生成的静态文件

访问localhost:4000检查hexo是否启动
5

最后就可使用hexo d命令，将生成的静态文件部署到github上了

四、美化属于自己的blog

4.1 选择主题

选择喜欢的hexo主题，并修改相应配置
在hexo的官网主题平台寻找自己喜欢的hexo主题https://hexo.io/themes/，在本胖的两天的寻找下，终于找到了一个超级心满意足的主题Annie。感谢主题制作者Sariay 。齐全易懂的主题使用说明也相当友好了。

4.2 修改配置

按照Annie主题作者所提供的readme修改配置
https://sariay.github.io/2018/08/27/Annie%E4%B8%BB%E9%A2%98%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/

4.3 利用github搭建云图库

搭建annie主题所需要的云图库，采用github仓库创建仓库的方式为博客提供图片。

A 创建一个新的代码仓库，命名为Random-img

6

B 在本地创建git本地仓库，连接到github远端仓库

1
2
3
4
5
6
7
8
9
10
11
12
#在家目录创建本地git仓库
mkidr ~/git 
cd ~/git
git init
#添加远程库
git remote add [shortname] [url]
#例 git remote add origin git@github.com:peana/-Random-img.git
git remote #查看当前连接的远程仓库
#git上传文件到github 需要三步骤，添加文件到暂存区，提交操作到本地的版本库，推送操作
git add [textName]
git commit -m '' #引号中写提交操作备注
git push -u origin master #origin为远程仓库别名，master为本地的项目分支

C 打开github代码仓库的page功能
打开Random-img代码仓库，settings–options–GitHub Pages （githua pages 设置在靠下位置，需要向下滑动才能查看
7

此URL即随机图片所需引用的地址，按4.2 配置说明修改相关配置文件
7