本次我会逐步演示如何在Github上搭建自己的静态博客,先看看我之前已经搭建好的博客效果:https://pidandoufu.github.io/,比如博客的风格,我自己比较喜欢Next主题的风格,Github上的项目地址是:https://github.com/iissnan/hexo-theme-next ,大家也可以根据自己喜欢的风格自行选择!
工具
Git工具
这个不用说,提交代码必备,直接使用它的命令行工具就很OK,说到命令行大家也不用担心,常用的就那么几个,Git的下载地址:https://git-scm.com/download/win 安装过程很简单在此不赘述,安装完成后鼠标右键菜单就会多出两个选项:Git GUI Here 、Git Bash Here,其中Git Bash Here就可以在当前目录下打开Git的命令行!
Node.js
Node.js是一个Javascript运行环境,是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。hexo正是需要这个环境,所以安装安装Node.js是必不可少的,下载链接:http://nodejs.cn/download/ 安装过程也是非常简单,不在赘述!
上述工具安装完成后,打开Windows的命令行,分别输入3个命令看看是否安装完成:
node -v 、npm -v 、git –version 出现版本号即说明安装完成!
Hexo
Hexo简介
hexo是个什么东西呢?总的来说就是把你的markdown文件转化为HTML静态页面的一种东西,浏览器是不会直接解析markdown文件的,所以我们需要把自己写的markdown文件先转化为HTML静态页面才能被浏览器解析,这个过程就需要Hexo来帮我们完成。更多内容请参考:http://coderunthings.com/2017/08/20/howhexoworks/ 这篇文章说的很详细!
安装过程
首先我们将本地的博客push到远程仓库中,本地博客得先有个存放位置,于是我们现在本地新建一个文件夹,名称随意(但是最好不要带中文和空格,对于一个程序员来讲,路径中包含中文或者空格简直是血的教训…),我就在A盘下新建一个名称为hexo的文件夹
然后进入到刚刚新建的文件夹,右键Git Bash Here,输入npm install hexo -g,开始安装Hexo,安装完成后输入 hexo -v 查看版本,出现如图所示信息即使安装成功
完成上一步操作之后,我们需要初始化这个文件夹,输入hexo init 即可初始化该文件夹,可以看到初始化之后中文件夹中多出来了如此多的内容!
接着我们需要安装一些组件,输入命令npm install
忙活了这么一大堆,现在该生成HTML静态资源文件了,输入命令hexo g完成页面的生成
我们先在本地看看效果吧,输入hexo s开始服务器,地址是http://localhost:4000/ ,然后打开浏览器就会出现我们的页面:
出现上面的页面就意味着我们成功了一半!
Github博客仓库的建立
申请一个Github账号
https://github.com/github 打开网址申请账户
正式建立博客仓库
注意仓库名称一定是你的Github用户名.github.io才是可以的
我的用户名是pidandoufu,仓库名称就是pidandoufu.github.io
此时在浏览器输入https://pidandoufu.github.io/,应该就会看到你的Github主页。
关联Github远程和本地仓库
Git个人信息
还是在博客根目录打开Git Bash Here
- 设置Github的用户名和email:
1 | git config --global user.name "Github用户名" |
- 生成ssh密钥
1
ssh-keygen -t rsa -C "注册Github使用的邮箱"
找到刚才生成的ssh密匙文件,复制其中的全部内容
从Github页面右上角的用户头像中进入设置页面
点击左侧设置栏中的SSH and GPG keys 对SSH进行设置
Title随便填写,Key中粘贴刚才复制的密钥,然后点击Add SSH
会让你再次输入一遍Github的密码
配置Deploy
在博客根目录下找到_config.yml文件中,找到deploy,修改为
1 | deploy: |
开始部署
当上述操作都完成之后,输入命令 hexo g 重新生成一下,然后使用命令hexo d 部署到Github远程仓库,如果无法找到:
这个时候我们需要输入:
1 | npm install --save hexo-deployer-git |
出现上图则说明安装成功,接着我们就可以直接使用命令hexo d部署了,首次使用ssh密匙的时候,需要我们输入一个yes确认一下
接下来,看看我们部署的效果:https://你的Github用户名.github.io 由于我们还未安装自己的主题,所以看到的是hexo的默认主题,效果如下,如果暂时无法部署远程仓库的话就只能在本地使用hexo s开启服务器,然后访问http://localhost:4000/ 来查看效果!
安装主题
下载主题
这个主题大家可以自由选择,Github上的项目地址是:https://github.com/iissnan/hexo-theme-next ,大家也可以根据自己喜欢的风格自行选择!,选择Clone or download下载zip包即可,解压之后会获得一个叫做hexo-theme-next-master的文件夹,我们直接将文件夹重命名为next即可,然后将next文件夹copy到我们的博客根目录下
修改配置文件
博客根目录下,有一个_config.yml文件,修改其中的属性theme: next,注意”:”后面有一个空格,修改之后保存!
重新生成资源
使用命令 hexo g 生成静态资源,主要是指html文件
重新部署
使用命令 hexo d 重新部署到远程仓库,当然如果只是测试效果的话暂时其实没必要立马就部署到仓库,我们只需要 hexo s 开启本地服务器,然后访问http://localhost:4000/ 即可,然后就可以访问到修改过主题之后的效果
本地仓库配置文件与主题配置文件
本次仓库配置文件
博客根目录下,有一个_config.yml文件
1 | # Hexo Configuration |
主题配置文件
1 | 要显示的菜单:主页、关于、标签、分类、归档、日程、站内地图、公益404 |
额外说明
当上述步骤都完成之后,每次修改之后配置文件或者源文件的时候都需要使用hexo g命令重新生成静态资源,然后就可以在本地开启服务器进行预览
之后我们点击分别点击一下关于、标签、分类、日程,除了首页可以点击之外,其他的都会出现这样一个东西:Cannot GET /about/ 或者Cannot GET /categories/等等,这是由于我们没有在本地建立相关的静态文件导致的
还是在博客根目录下Git Bahs Here打开命令行,缺什么就新建什么,比如要新建关于、标签、分类、日程的页面
1 | hexo new page "about" |
于是博客根目录下的source文件夹下就出现了about、tags、categories等文件夹,里分别有对应index.md文件