Github+Hexo搭建个人网站详细教程
背景
随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后,如果你是一个不甘寂寞的程序猿,是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程。
准备
- Github账号
- 安装Git
- 安装Node.js
Github账号
首先我们需要一个Github账号,若是没有的话,可以前往官网注册一个,不懂的话,可以参考Github账号注册
安装Git
什么是Git ?
简单来说Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。我们网站在本地搭建好了,需要使用Git同步到GitHub上。
如果想要了解Git的细节,参看廖雪峰老师的Git教程:Git教程
从Git官网下载:Git - Downloading Package (git-scm.com)
现在的机子基本都是64位的,选择64位的安装包,下载后安装,在命令行里输入git测试是否安装成功,若安装失败,参看其他详细的Git安装教程。
安装成功后,将你的Git与GitHub帐号绑定,鼠标右击打开Git Bash
或者在菜单里搜索Git Bash,设置user.name和user.email配置信息:
git config --global user.name "你的GitHub用户名" |
若存在多个账号共用的情况,请不要用–global,在每个项目中设置单独的信息
生成ssh密钥文件:
ssh-keygen -t rsa -C "你的GitHub注册邮箱" |
然后直接三个回车即可,默认不需要设置密码
然后找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制
打开github的SSH and GPG keys 页面,新建new SSH Key
Title为标题,任意填即可,将刚刚复制的id_rsa.pub内容粘贴进去,最后点击Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功,输入 ssh git@github.com ,如下图所示则说明配置成功!
安装Node.js
Hexo基于Node.js, 前往 Node官网下载安装包,注意安装Node.js会包含环境变量及npm的安装,安装后,检测Node.js是否安装成功,在命令行中输入 node -v
检测npm是否安装成功,在命令行中输入npm -v :
到这了,安装Hexo的环境已经全部搭建完成。
安装Hexo
Hexo就是我们的个人博客网站的框架, 这里需要自己在电脑常里创建一个文件夹,可以命名为Blog,Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后,进入文件夹中,按住shift键,右击鼠标点击命令行
使用npm命令安装Hexo,输入:
npm install -g hexo-cli |
这个安装时间较长耐心等待,安装完成后,初始化我们的博客,输入:
hexo init blog |
注意,这里的命令都是作用在刚刚创建的Blog文件夹中。
为了检测我们的网站雏形,分别按顺序输入以下三条命令:
hexo new test_my_site |
三个命令依次是新建一篇博客文章、生成网页、在本地预览的操作。完成后,打开浏览器输入地址:
可以看出我们写出第一篇博客
Hexo常用命令
npm install hexo -g #安装Hexo |
创建Github仓库
打开https://github.com/,新建一个项目,如下所示:
然后如下图所示,输入自己的项目名字,后面一定要加.github.io
后缀,README初始化也要勾上。名称一定要和你的github名字完全一样,比如你github名字叫abc
,那么仓库名字一定要是abc.github.io
然后项目就建成了,点击Settings
,向下拉到最后有个GitHub Pages
,点击Choose a theme
选择一个主题。然后等一会儿,再回到GitHub Pages
,会变成下面这样:
点击那个链接,就会出现自己的网页啦,效果如下(我的是已经使用主题的页面,你们的页面可能不一样):
连接Github仓库
打开博客根目录下的_config.yml
文件,这是博客的配置文件,在这里你可以修改与博客相关的各种信息。
修改最后一行的配置:
deploy: |
repository修改为你自己的github项目地址.
绑定域名
现在默认的域名还是xxx.github.io
,是不是很没有牌面?想不想也像我一样弄一个专属域名呢,首先你得购买一个域名,xx云都能买,看你个人喜好了。
以我的谷歌域名为例,如下图所示,添加一条解析记录:
然后打开你的github博客项目,点击settings
,拉到下面Custom domain
处,填上你自己的域名,保存:
这时候你的项目根目录应该会出现一个名为CNAME
的文件了。如果没有的话,打开你本地博客/source
目录,我的是D:\study\program\blog\source
,新建CNAME
文件,注意没有后缀。然后在里面写上你的域名,保存。最后运行hexo g
、hexo d
上传到github
备份博客源文件
有时候我们想换一台电脑继续写博客,这时候就可以将博客目录下的所有源文件都上传到github上面。
首先在github博客仓库下新建一个分支hexo
,然后git clone
到本地,把.git
文件夹拿出来,放在博客根目录下。
然后git checkout hexo
切换到hexo
分支,然后git add .
,然后git commit -m "xxx"
,最后git push origin hexo
提交就行了。
替换主题
我使用的主题是这个: Butterfly
具体操作可以参考该主题的文档