利用Hexo和Github Page在Github上免费搭建自己的个人博客网站
前言: 刚开始尝试用Python做项目,遇到问题常常穿梭于各大博客寻求解决,继而萌生了自己写博客的想法。我们可以在博客分享做项目遇到的坑,也可以对自己学到的知识进行梳理。作为一个爱学(zhuang)习(B)的程序员,在Github上搭建自己的个人博客也是一个不错的选择,当参考着别人的教程,成功地把博客搭建起来了,第一篇博文也就有素材了。
一、前期准备
- 到GitHub官网上注册自己的账号,用户名还是要好好取的,毕竟跟博客域名有关。
- 安装Git,直接到Git官网下载安装就行。(个人感觉Git还真的是一个好用又强大的版本管理工具)
- 安装node.js环境,可以到node.js官网下载自己系统对应的版本进行安装。
二、建立仓库
登陆GitHub,在头像隔壁的加号点击 New repository
,新建一个代码仓库。
进入代码仓库创建页面,Repository name 填入username.github.io
,其中username
是自己的名字,最好跟注册GitHub时的用户名一致,当然,不一样也可以,受影响的只是访问博客的地址。
填写好仓库名后,点击下方的Create repository
创建代码仓库。
创建成功之后,点击Setting
。
其中Rename
是更改仓库名,说不定你会用到。
拉到下面,找到GitHub Pages
,访问博客的网址在这里。
三、安装及配置Hexo
安装Hexo
Hexo是一个快速,简介高效的博客框架,支持Markdown,拥有强大的插件系统。
选择一个自己认为合适的地方建立自己博客的站点文件夹,用来存放博客的站点文件。
在此文件夹内右键Git Bash Here
(这个需要安装了Git才有的),并在命令行输入:
npm install hexo-cli -g
可能会看到一个Warning
,不用担心不影响使用的。(只要不是Error
就行,程序员都是不关心Warning
的,完美主义(Qiangbozheng)的当我什么都没说过)
然后命令行继续输入:
npm install hexo --save
安装完之后,在命令行中输入hexo -v
测试一下,能看到hexo的版本即安装成功。
配置Hexo
在博客站点文件夹内右键Git Bash Here
。(如果刚才没有关掉Git Bash就不用重新打开)
使用前先初始化Hexo,在命令行输入:
hexo init
然后在命令行继续输入:
npm install
这里npm将会自动安装所需要的组件。
窥视Hexo
想要预览一下Hexo的博客页面,先要生成静态网页,在命令行输入:
hexo generate
然后是运行本地服务(平时调试也是用这个),在命令行继续输入:
hexo server
可以在命令行看到:
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000. Press Ctrl+C to stop.
浏览器输入 http://localhost:4000,即可看到Hexo博客页面。(Hexo的默认主题是landscape)
四、将博客部署到Github
配置Git的个人信息
再次来到博客站点文件夹,右键Git Bash Here
。
Git的个人信息,其实就是用户名和邮箱,在命令行依次输入:
git config --global user.name "uesrname"
git config --global user.email "email"
其中username
和email
就是注册GitHub时的用户名跟邮箱。
添加SSH密钥到GitHub
先要生成SSH密钥,在命令行输入:
ssh-keygen -t rsa -C "email"
这里的email
同样是注册GitHub的那个邮箱,一直回车直到命令结束。
然后默认会在C:\Users\username.shh
中会生成两个文件,分别是id_rsa
和id_rsa.pub
。
将整个.ssh
文件夹拷贝到Git的安装目录下。
拷贝ssh key到剪切板(待会可以直接粘贴的),在命令行输入:
clip < ~/.ssh/id_rsa.pub
登陆GitHub,在头像点击的Settings
。
然后选择左边的SSH and GPG keys
,再点击New SSH key
,之后会出现添加页面。
在Title里给这个ssh key起个名字,在下面Key里粘贴刚才拷贝的ssh key,然后点击 Add SSH key
。
检验一下刚才添加的SSH,在命令行中输入:
ssh -T [email protected]
当出现”Are you sure you want to continue connecting?”时输入”yes”,当出现”hi …! you are successfully authenticated,…”的时候,就成功了。
配置部署信息
在博客站点文件夹中找到_config.yml
,打开并找到Deployment
,修改如下:
deploy:
type: git #使用Git发布
repository: https://github.com/username/username.github.io.git #创建的GitHub仓库地址
branch: master #部署的分支
其中repository
就是代码仓库的克隆地址。
执行部署
首次部署需要先安装一个扩展,命令行输入:
npm install hexo-deployer-git --save
然后执行Hexo的生成、部署命令:
hexo generate #生成
hexo deploy #部署
hexo d -g #在部署前先生成
出现”INFO Deploy done: git”,就说明部署成功了,然后就可以通过博客网址访问自己的博客了。
五、博客的更新与维护
博客的更新与维护,实际上是指新文章的持续发表,以及对旧文章中已知的错误进行修正,这样才能维持自己博客的活力。基于Hexo搭建的博客是支持Markdown编辑的,所以对文章的编辑、排版等操作不算太复杂。
在博客站点文件夹,右键Git Bash Here
,在命令行输入:
hexo new "blog_article"
这样就新建了一篇名为blog_article
的空白博客文章,在博客站点文件夹,有个名为source
的文件夹,是存放博客文章Markdown源码的。用Markdown编辑器编辑_posts
里的.md
文件,编辑好之后生成静态网页,然后部署到Github,在命令行输入:
hexo generate #生成
hexo deploy #部署
随后通过博客网址访问自己的博客,刷新了就好。
写在最后: 关于Hexo博客框架还有很多玩法,例如更换主题、添加访问量记录、添加评论功能等等,可以自己挖掘一下,稍微发挥一下程序员的探索精神。