前言
思来想去,还是决定记录下我搭建的这个Blog的所有流程,这也算是我的处子作啦。首先要对Hexo表示感谢。我是Windows的系统,
所以本文讲的都是在本系统中是如何搭建的。即将毕业的我,突然感觉该需要一个东西来记录下我的所学所想。大概拖拖拉拉的用了好多天才最后搭建好,主要是提高下自己的功力。
下面我将分步详细介绍如何用Hexo和GitHubPages来搭建Blog。个人能力有限,以下流程有什么不懂的或者有好的知识与我分享欢迎联系我,大家共同进步。
What is Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题
生成静态网页。出自台湾大学生 tommy351 之手。是一个基于Node.js的静态博客程序。另外还有一个好处:使用 Hexo + GitHub 搭建博客
不需要购买域名和服务器,由 Github 提供域名和网站页面空间。支持多种框架主题,我选择的是Next主题,简约。
What is GitHub
GitHub 是一个面向开源及私有 软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管。有足够的免费空间(1G),
自己管理资料,保存可靠。2018年10月19日,欧盟正式无条件批准了微软以75亿美元收购GitHub。
搭建前准备工作
- Hexo官方文档 (具体对hexo有什么问题可以查看文档)
- Git (点进去可直接下载最新版本,具体的安装流程)
- Node.js (选个最新的下载就好,具体安装流程)
- Next主题官网 (一些配置讲解的还是比较详细)
- 其他的一些主题可供参考 (根据自己的喜好风格,选择自己的主题)
- Notepad++(我用的是这个来编写Markdown文章的,如果文章出现乱码,可以用记事本打开另存为,然后选择UTF-8编码就好了)
开始搭建
说了那么多,准备工作也可以了,现在撸起袖子干吧!
安装环境依赖(Git and Node.js)
首先把前面说的Git和Node.js安装到电脑上(Windows系统),教程也有,对于聪明的你来说,不会难倒你。这是我们搭建博客基层的软件。以下所有的命令输入都是在Git软件里面进行的。
安装Hexo
在你安装好Git软件后,你可以在电脑空白地方或者桌面上右击鼠标,就会看到Git GUI Here和Git Bash Here,然后在你想把博客源文件
放的电脑哪个位置,在里面创建个文件夹用于保存Hexo生成的博客内容(文件夹名可为myblog)。
然后进入该文件夹,空白位置右击,然后点击Git Bash Here
,在里面输入:
npm install -g hexo-cli
接着输入hexo -v
然后输出以下内容就表示安装成功了(结果有可能不一样因为版本问题,但不影响使用)
$ hexo -v
hexo: 3.7.1
hexo-cli: 1.1.0
os: Windows_NT 10.0.10240 win32 x64
http_parser: 2.7.0
node: 7.0.0
v8: 5.4.500.36
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 51
openssl: 1.0.2j
如果没有报错,就表示安装成功了。接下来继续输入:
hexo init # 初始化组件
回车后npm就会自动安装博客所需的组件了,你要做的就是等待,等全部安装完就可以了。这时你就看到文件夹里会出现以下目录结构:
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
验证以下hexo是否安装成功,还是在这个文件夹里右击找到Git Bash Here
在里面输入命令
hexo g
等待加载完然后在输入命令
hexo s
出现这种样式,就启动成功了
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
然后打开你的浏览器,在网址栏里输入http://localhost:4000(默认端口为4000)。就会看到博客的原始状态,也就证明安装成功了如下图所示:
是不能访问。原因是:那是你的电脑端口被占用了,hexo默认的端口是4000,你应该换个端口运行,可换成
hexo s -p 5000
就可以访问了。运行成功后,就在刚刚的
Git Bash Here
对话框中按键盘上的Ctrl+c停止服务,浏览器就不能浏览了。到此整个hexo搭建的博客结束了。此时感觉自己小有成就感。
部署到GitHub
首先你需要创建一个Github:https://github.com/账号。在你注册时,一定要记住你使用的注册的邮箱,GitHub大多数都是通过邮箱发送消息的。
申请成功后,会有邮箱通知,验证下就可以了。
创建代码仓库
这时用我们自己的GitHub用户名建立仓库,http://username.github.io
这样的用户或访问站点,每个用户名只能建立一个。
首先,在保证登录的情况下,我们点击右上角的+
号,点击New repository
,新建一个仓库
进入后,在Repositoty name输入框里填写自己的用户名.github.io
。例如我的用户名为xiayunhu,则填写xiayunhu.github.io
随后选择Setting进入设置,找到Github Pages如下:
然后我们需要任意选择一个主题,点击Choose a theme,然后选择好后,页面会跳转到仓库里如图所示:
此时你再打开Setting,我们会看到你开启了GitHub Pages之后得到的域名如下:
现在你可以使用https://UserName.github.io
,访问自己的博客网站了。关于更多Github的使用和介绍,大家可以去菜鸟教程上或者百度自行了解。
配置SSH
本地博客和Github都做好了,接下来我们如何将本地Git项目和Github连接起来?就是用SSH。还是在博客文件夹里右击打开Git Bash Here
输入以下命令
ssh -T git@github.com
如图所示:
输入命令回车,然后你会看到这样的反馈
The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?
直接在后面输入yes再回车,看到下面的图的结果,就证明配置成功了。
注意,问题来了哦,当你输入yes后,有可能会提示如下信息
因为大多数的情况是github账号没有添加ssh公钥信息,这是打开GitHub网站,在确保登录的情况下,找到网站的右上角找到Settings
点进去,在左边找到SSH and GPG keys
后,点进去右上角找到New SSH key
点进去后如下图所示:
如图片中的key提示,我们要原样复制~/.ssh/id_rsa.pub
文件的内容。如果没有该文件在Git Bash Here
里输入以下命令
ssh-keygen -t rsa
然后一直回车结束,然后在C盘的C:\Users\Administrator.ssh里找到id_rsa.pub
文件,用记事本打开,Ctrl+A -> Ctrl+C
在New SSH key
里面Ctrl+V
粘贴,点击Add SSh key
保存就可以了。最后再输入
ssh -T git@github.com
回车就OK了。
将本地文件部署到GitHub
在把本地仓库传到github上去之前,还需要设置username和email,因为github每次commit都会记录他们。
$ git config --global user.name "your name" #仓库的名字
$ git config --global user.email "your_email@youremail.com" #你的邮箱
设置完后,我们每次使用hexo d
命令时就不用每次都输入密码了。
接下来我们就要修改hexo中的_config.yml文件(也就是站点配置文件)如下图所示:
找到文件里面的deploy标签,改成如下列所示,Ctrl+S
保存,此时要注意,冒号后边都要加上一个空格,否则会报错的。
deploy:
type: git
repo: git@github.com:xiayunhu/xiayunhu.github.io.git
branch: master
然后在文件夹里运行Git Bash Here
输入以下命令
npm install hexo-deployer-git --save
再依次输入
hexo clean
hexo generate #可简写hexo g
hexo deploy #可简写hexo d
出现以下提示
那么恭喜你,个人博客已经部署到GitHub上了。你可以去你的GitHub仓库查看是否有信息,稍微等待一下就可以访问http://your_user_name.github.io
(your_user_name也就是你的仓库名字),此时你就可以看到你的个人博客了。
将自己的域名和GitHub Pages的空间绑定
我们现在可以通过本地浏览或者GitHub Pages提供的域名访问了,但总感觉不是自己的东西,于是我就自己申请了一个域名,来浏览自己的博客,这样在介绍自己的博客的时候,明显的高大尚许多。我是在腾讯云的网站上申请的,需要备案(比较麻烦,需要半个多月),你也可以在阿里云上申请或者其他的地方购买,应该不腾讯云快,我介绍的是腾讯云上申请的域名。
申请域名
此时要注意的是:不需要购买服务器
进入到腾讯云的官网,在产品一栏,找到域名注册,这样就可以注册了,不同的域名价格不一,自行找个好记得就好。
具体备案,根据里面的流程自行备案。等备案好,然后对域名进行解析:
点击添加解析,记录类型选A或CNAME,A记录的记录值就是ip地址,github(官方文档)提供了两个IP地址,192.30.252.153和192.30.252.154,这两个IP地址为github的服务器地址,两个都要填上,解析记录设置两个www和@,线路就默认就行了,CNAME记录值填你的github博客网址。如我的是xiayunhu.github.io。
这些全部设置完成后,此时你并不能要申请的域名访问你的博客。接着你需要做的是在hexo根目录的source文件夹里创建CNAME文件,不带任何后缀,里面添加你的域名信息,如:www.xyhwh.com。
注意搭建完成访问出现404 :你认为配置没有问题,那么可能只是你的浏览器在捣鬼,可尝试清除浏览器缓存再访问或者换个浏览器访问。
应该就解决了。
GitHub Pages里配置域名
进入GitHub,然后找到Settings如下图所示:
然后往下找,找到GitHub Pages一栏如图所示:
这样整个用Hexo+GitHub搭建的博客到现在就搭建完成了。
后记
以上所述,就是搭上建博客的全部流程,如果你有什么问题或者文章有错的地方,欢迎在下面留言。具体的主题配置,将会在下节详细介绍。
参考的资料: