博客血泪史

本文用于记录xin如何使用GitHub上建立个人博客。我的博客
使用安知鱼大佬的主题
博主是前端小白,所以本教程只介绍如何搭建个人博客。

本文建议将博客在本地完全配置好后再将博客同步到Github上,如果未在本地配置好,每次更新配置后将文件同步到Github上后因为浏览器缓存等原因将会导致博客不能及时显示更改后的配置是否生效

准备工作

安装nodejs

Hexo是基于nodeJS编写的,所以需要安装一下nodeJs和里面的npm工具。
windows:官方安装,选择LTS版本即可。
Linux:

1
2
sudo apt-get install nodejs
sudo apt-get install npm

安装完成后,打开命令行,输入以下两行检查NodeJs是否安装成功

1
2
node -v
npm -v

安装hexo

进入想要安装hexo的目录,使用命令

1
npm install -g hexo-cli

使用命令hexo -v查看hexo版本

搭建博客

为了提高效率,以及为了安装界面的简便性,使用vscode的命令行进行开发。
在VScode中打开命令行,进入你想存放博客的目录比如D盘,初始化博客根目录

1
2
3
hexo init blog
cd ./blog
nmp install

该命令将创建一个名为==blog==的博客根目录
进入创建的博客根目录
安装node.js模块

将会在blog目录下生成如下文件

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题
  • _config.yml: 博客的配置文件

此时使用以下命令将完成对博客初始化

1
2
3
hexo clean
hexo generate
hexo server
  • hexo clean 清除了你之前生成的东西。
  • hexo generate 生成静态文章,可以用 hexo g 缩写
  • hexo server 启动服务器,可以使用hexo s 缩写
    此时,打开浏览器,输入localhost:4000,即可看到你的博客了。

此时是在本地完成了对博客的部署,后面随时可以使用如上命令对博客进行预览

配置博客

上述操作已经完成了初始的安装,这个界面不太美观,可以使用安知鱼主题对博客进行美化。

安知鱼官方文档

改文档已经对主题的配置进行了详细描述,本文不再赘述

注意插件的安装

安装 pug 和 stylus 渲染插件

这是基础插件

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

无法安装可以使用cnpm进行安装

1
npm install hexo-renderer-pug hexo-renderer-stylus --save --registry=http://registry.npmmirror.com

博客上云

创建一个github账户

安装git

Windows:到 git官网下载并安装即可。
Mac:MacPorts 或 安装程序。
Linux (Ubuntu, Debian):

1
sudo apt-get install git-core

Linux (Fedora, Red Hat, CentOS):

1
sudo yum install git-core

Windows有桌面版的git工具:Github Desktop
此工具可以简化将文件上传至github的步骤。

创建仓库

创建与用户名同名的仓库,后面加.github.io

只有这样的仓库才会被识别为博客。

例如:我的github用户名: huozhebuhao,我的仓库名: huozhebuhao.github.io

生成 SSH 添加到 github 仓库

由于后续都是通过 SSH 进行仓库代码的快速部署,所以这一步很有必要,如果之前有在你的电脑本地进行过你的 github 仓库的 SSH 绑定,那此步可跳过
命令行下执行以下命令

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。
这样GitHub才能知道你是不是对应它的账户。

可以用以下两条,检查一下配置的以上配置是否正确:

1
2
git config user.name
git config user.email

创建SSH,多次回车:

1
ssh-keygen -t rsa -C "youremail"

此时已生成了.ssh的文件夹。
在你的电脑中找到这个文件夹,一般在C:\Users\当前用户名\.ssh

ssh,简单来讲,就是一个秘钥
id_rsa 是你这台电脑的私人秘钥,不能给别人看的
id_rsa.pub 是公共秘钥,可以随便给别人看。
把这个公钥放在 GitHub 上,这样当你链接 GitHub 自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过 git 上传你的文件到 GitHub 上。
在 github 的 setting 中,找到 SSH keys 的设置选项,点击 New SSH key 把你的 id_rsa.pub 里面的信息复制进去。
复制显示不通过是请注意是否复制了完整的内容。

之后,在 gitbash 中输入以下指令,查看是否 SSH 是否已绑定成功

1
ssh -T git@github.com

将 博客 部署到 github

打开站点配置文件 _config.yml
文件末尾进行如下修改即可,huozhebuhao 改为你的 github 账户用户名

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

修改完配置文件 _config.yml 并保存后,回到 gitbash
这个时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。

1
npm install hexo-deployer-git --save
1
2
3
hexo clean
hexo generate
hexo deploy

hexo clean 清除了你之前生成的东西。
hexo generate 生成静态文章,可以用 hexo g 缩写
hexo deploy 部署文章,可以用hexo d缩写
注意deploy时可能要你输入 username 和 password,但设置了 SSH 一般不用。