1、前言
其实一直有搭建博客的想法,但直到今天才开通了第一个博客,还是利用上假期的闲工夫。在大佬们博文的帮助下,小站初具模样,这里对他们致以万分感谢。下面就搭建过程进行简单记录。点击前往我的小站🙏
2、前提准备
2.1、简介
- Hexo 是一款基于 Node.js 用于快速搭建博客的框架,有了它就可以完成完成个人博客的构建,它会帮你构建博客的整个框架,你只需要会使用Markdown 写博客即可。关于Hexo的具体介绍,可以在其官方网站查看具体的说明。
- Butterfly 博客主题。A Simple and Card UI Design theme for Hexo.
- Github Page 是 Github 提供的静态网站托管服务,可从 Github 仓库中展示你的个人、组织或者项目的静态网页。你可以选择使用 Github Pages 免费提供的域名 github.io 或者自己购买域名来发布站点,站点可以被免费托管在 Github 上。使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦。
- Codiing 是一站式软件研发管理协作平台,提供 Git/SVN 代码托管、项目协同、测试管理等工具,将博客托管在coding上,可提高国内访问博客的速度。
- Git 是目前世界上最先进的分布式版本控制系统(没有之一)。这里我们使用git bash 完成安装,初始化,上传等操作。
- node.js 是一个基于Chrome V8引擎的JavaScript运行环境。安装好node.js后利用npm包管理工具来安装Hexo
2.2、安装Git
在windows10系统下,前往Git官网下载,安装。其他系统下的Git安装方法可在hexo的文档中查阅。
安装正确的话,在桌面或文件夹空白处鼠标右键菜单会新增“Git GUI Here”和“Git Bash Here”两个选项。
Git 常用命令
git clone -b <branch> https://github.com/xxxx/xxxx.git
git pull
git add .
git commit -m 'comment'
git push
2.3、 安装node.js
前往node.js官网 选择长期支持版本的node.js下载,默认路径安装即可。
在cmd中输入命令
npm --version
出现版本信息则表示安装成功。
2.4、安装Hexo
完成前两个应用的安装后,即可使用npm安装Hexo
在桌面空白处单击右键,打开git bash,输入Hexo安装命令
npm install -g hexo-cli
因为npm是从国外服务器下载,可能出现异常,速度慢等问题,所以有更好的选择
这是一个完整 npmjs.org
镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
其安装命令
npm install cnpm -g --registry=https://registry.npm.taobao.org
之后可以使用其定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
:
cnpm install -g hexo-cli
下载速度快了不少有没有
检查Hexo是否安装成功
hexo -v
出现版本信息则表示安装成功。
安装好以后,可以使用以下两种方式执行 Hexo:
npx hexo <command>
- 将 Hexo 所在的目录下的
node_modules
添加到环境变量之中即可直接使用hexo <command>
3、搭建工作
3.1、初始化
这里在E盘下新建一个目录Blog
,用来存放相关文件。在此处打开 Git Bash
hexo init
注意:若没有把Hexo添加到环境变量,在所有命令中的
hexo
前都要加上npx
命令执行完成后,将在E:\Blog\下生成相应的文件,目录如下:
主要关注的是:
- _config.yml , 配置文件,在此配置大部分参数
- source/_posts , 存放md文件
- themes , 主题文件夹
3.2、生成静态页面(本地)
可通过以下命令生成静态页面:
hexo g
完成后会在根目录E:\Blog\下生成public文件夹,里面包含相应的html页面。
3.3、启动服务器(本地)
可通过以下命令启动服务器:
hexo s
这条指令运行完成后可在本地启动服务器并预览博客,默认网址为http://localhost:4000/
。
如果以上步骤都不出意外的话,你就会看到一个Hexo博客初始化的页面。
4、更换主题
默认的主题可能并不是我们想要的效果,那么就可以通过更换主题来实现。可以在Heox官网的主题页面选择想要的主题。这里,选择Butterfly主题。
Butterfly主页的展示页面:https://jerryc.me
详细的安装文档的地址为:https://jerryc.me/posts/21cfbf15
Github地址:https://github.com/jerryc127/hexo-theme-butterfly
根据文档说明直接配置主题即可,这里简单记录如下:
Butterfly主题安装
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
应用主题
修改站点配置文件_config.yml
,把主题改为butterfly
theme: butterfly
为方便后续设置,这里把butterfly
目录下的 _config.yml
配置文件复制到 Blog
目录下,并重新命名为 _config.butterfly.yml
。以后对主题的相关设置只需要在 _config.butterfly.yml
进行配置就行。
安装相关插件
npm install hexo-renderer-pug hexo-renderer-stylus --save
在安装,应用主题时遇到的问题可在bufferfly的安装文档中查阅。
在一定修改后通过以下命令来查看应用主题后的初步效果
hexo clean #清楚缓存文件
hexo g #生成发布用的静态页面
hexo s #重启本地服务器
刷新刚才的网址:http://localhost:4000 ,可以看到更新后的主题:
更多细节设置,如菜单栏,背景图片,代码格式等等,可以参考Butterfly的文档来配置。
5、部署到Github
截止目前,已经成功安装好了一个初始化的Hexo博客。但是暂时还只能在自己电脑上看到,如何让别人通过域名可以访问到呢?接下来就要请出今天的另外一位主角GitHub Pages了。
另外,以上的安装步骤也可参考Hexo官方文档,关于各命令有更详细的解释。
5.1、创建Github仓库
这里假设已经注册过了Github帐户,如果没有,可以去Github注册。
注册好了后,登录Github,创建仓库:点击右上角的+号,选择new repository
将仓库名设置为 username.github.io
,其中,username请对应换成你的github用户名。
5.2、添加SSH公钥
如果第一次使用git的话,需要设置用户名和邮箱:
git config --global user.name "your username"
git config --global user.email "your email"
将上述的”your username”换成自己的真实用户名,”your email”换成真实的email。
然后,生成公钥
ssh-keygen -t rsa
在C盘/用户/用户名/.ssh目录下找到id_rsa.pub
文件,用文本编辑工具打开,并复制所有文本内容。在Github页面右上角,点击用户头像-Settings-SSH and GPG keys-New SSH key
把复制的公钥文本内容粘贴到Key中,上方的Title可随意填写
添加完成后可
ssh -T git@github.com
如果配置成功,可以看到成功的回复。
5.3、上传文件到Github仓库
在配置文件_config.yml
中添加仓库信息:
deploy:
type: git
repo: #你的仓库地址,如:https://github.com/wawyw/wawyw.github.io.git
branch: master
直接通过hexo来发布到github,需要安装以下插件:
npm install hexo-deployer-git --save
安装成功后,执行以下命令:
hexo d #生成一个.deploy_git的文件夹,并把本地生成的静态文件部署Github仓库中的master分支上
刷新github对应的repository页面,即可看到提交的内容:
5.4、配置静态站点
点击Settings, 进入GitHub Pages配置,由于之前新建仓库的时候,仓库名为username.github.io,github已经自己为我们发布了静态的页面。如果不是username.github.io的格式,则需要手动配置。
之后在浏览器中输入username.github.io
(可能你已经发现了,这个就是之前新建仓库的名字,同时也是博客的域名),没毛病的话,应该可以再次看到那个熟悉又亲切的博客页面了。
至此,我们已经通过Hexo创建了一个最原始的博客,并且通过把博客静态文件放到GitHub的仓库中,实现了从网上以GitHub的默认域名访问这个博客。
如果需要个性化域名,则需要申请对应的域名并绑定到Github上。
因为Github用的是国外的服务器,站点加载速度可能较慢,可考虑使用GitHub+coding双托管博客,这样一来,国内访问coding的服务器,国外访问GitHub的服务器,以提升国内访问博客的速度。
6、 部署到Coding
6.1、创建Coding仓库
同样,先官网注册
选择项目,新建一个代码托管项目
填写完项目基本信息后,完成创建
6.2、添加SSH公钥
找到之前部署到Github时生成的id_rsa.pub
文件,复制其内容。
打开Coding的个人设置
,SSH公钥
,添加公钥,名称自定,粘贴刚才复制的公钥,添加好后如下图。
6.3、上传文件到Coding仓库
打开新建的仓库,点击克隆➡模式选ssh➡复制地址,将仓库链接添加到站点的配置文件 _config.yml
中
修改完之后 hexo d
部署就会将 public 目录推送到 Coding 上博客仓库的 master 分支。部署后仓库如下:
6.4、配置静态站点
把博客上传部署到仓库后,我们还要在Coding生成静态页面。
进入仓库,进入项目设置
(注意这个在左下角),项目与成员
,右侧功能开关
,开启 持续部署
即可
开启后就会在仓库的左侧看到此功能,点击静态网站
,新建网站,填写网站名称,其它默认,保存。
开启服务后会出现访问地址,如下图:
访问此地址后会跳转到你的博客首页。与GitHub部署类似,此网址相当于你博客的另一个访问地址。我们后面要把所有的这些网址都解析到同一个域名上。
7、绑定个人域名
配置好Github和Coding的静态页面后,已经可以通过给定的网址访问到博客页面了。如果需要个性化域名,则需要申请对应的域名并绑定到Github和Coding上。
7.1、注册域名
注册域名的平台有很多可以选择,这里以阿里云为例。
来到万网平台,查询可注册的域名
挑选喜欢的域名,加入清单→立即结算→立即购买
这里选择的是
.top
域名,你懂的😂
7.2、解析域名
登录阿里云的控制台,点击左侧菜单-域名,进入域名管理页面。
在域名列表中,找到需要解析的域名,点击对应的解析按钮。
点击”添加记录”
7.2.1、@解析-Github
在cmd窗口中,ping一下之前配置的Githun的静态页面地址
可以获取到对应的ip地址
添加记录编辑如下:
- 记录类型选择A,添加 A 记录可实现将域名指向 IP 地址。
- 主机记录输入@,一般是指子域名的前缀(如需创建子域名为www.dns-example.com, 主机记录输入 www;如需实现dns-example.com,主机记录输入 @)
- 解析线路选择境外,因为我们是准备国内访问时访问到Coding,国外访问时访问到Github
- 记录值输入刚才获取到的ip地址,如:185.199.110.153
7.2.2、www解析-Github
添加记录编辑如下:
- 记录类型选择CNAME,添加 CNAME 记录可实现将域名指向另外一个域名。
- 主机记录输入www
- 解析线路选择境外
- 记录值就输入Github的静态页面地址,即 wawyw.github.io
7.2.3、@解析-Coding
在cmd窗口中,ping一下之前配置的Coding的静态页面地址
可以获取到对应的ip地址
添加记录编辑如下:
- 记录类型选择A
- 主机记录输入@
- 解析线路选择默认
- 记录值输入刚才获取到的ip地址,如:124.156.144.32
7.2.4、www解析-Coding
添加记录编辑如下:
- 记录类型选择CNAME
- 主机记录输入www
- 解析线路选择默认
- 记录值就输入Coding的静态页面地址
最后配置完成如下图:
7.3、绑定域名
7.3.1、Github域名绑定
在项目根目录-source目录下,新建CNAME文件,内容输入前面申请的域名,如:www.wawyw.top
上传到Github和Coding的仓库
hexo clean
hexo g
hexo d
上传后就可以在Github和Coding对应的项目根目录下发到提交到的CNAME文件。
由于提交了CNAME文件,Github的静态页面服务已经自动绑定了新提交的域名
这时,就可以用上面自定义的域名访问我们的博客了。
7.3.2、Coding域名绑定
回到Coding仓库的静态网站设置页面,选择自定义域名→新建域名
注意:一定要添加两条,一条带
www.
的,一条不带www.
的
添加后会给出两条CNAME记录,需要回到阿里云控制台的解析设置中修改对应的记录值
OK!现在我们就算完成了GitHub+Coding双托管博客了
这样国内的用户访问的就是coding上部署的博客,而国外的用户访问的就是github上部署的博客
7.4、国内测速对比
测速网站:http://ping.chinaz.com/
国内访问GitHub服务器:
国内访问Coding服务器:
一对比我们就可以看到Coding服务器在国内访问快多了,而GitHub服务器在国内访问有很多都是超时,速度提升较明显。
不过,在后面体验过CDN加速后,这又算得了啥,先上图
这里选择了腾讯云的CDN加速服务,新用户可以白嫖6个月的流量哟。又拍云的CDN也不错,更多详情可以去官网了解。(前提要做好网站的备案工作)
8、写博客
创建页面命令
hexo new page page_name
这里在source/_posts
目录下以markdown
的格式编辑博客文章。
Front-matter
Front-matter 是md文件最上方以---
分隔的区域,用于指定每篇博客的信息。
如果标注可选
的参数,可根据自己需要添加,不用全部都写在markdown里
Page Front-matter
---
title:
date:
updated:
type:
description:
comments:
top_img:
---
写法 | 解释 |
---|---|
title | 【必需】页面标题 |
date | 【必需】页面创建日期 |
type | 【必需】标签、分类等页面需要配置 |
updated | 【可选】页面更新日期 |
description | 【可选】页面描述 |
comments | 【可选】显示页面评论模块(默认 true) |
top_img | 【可选】页面顶部图片 |
Post Front-matter
---
title:
date:
updated:
tags:
categories:
top_img:
cover:
aplayer:
sticky:
---
写法 | 解释 |
---|---|
title | 【必需】文章标题 |
date | 【必需】文章创建日期 |
updated | 【可选】文章更新日期 |
tags | 【可选】文章标签 |
categories | 【可选】文章分类 |
top_img | 【可选】文章顶部图片 |
cover | 【可选】文章封面 |
sticky | 【可选】文章置顶,数值越大,置顶的优先级越大。 |
博客编辑完成后,仍然是通过这三步发布文章
hexo clean
hexo g
hexo d
发布之前,在本地预览博客用到的命令:
hexo s
9、结语
总的来说,这次的搭建过程还算顺利,期间遇到的一些问题也通过浏览大佬的文章解决了,感谢他们的分享。网络上关于利用Hexo搭建博客的资料有很多,写这篇文章主要是为了记录此次搭建博客的过程,便于后续可能再次部署,同时也希望能帮助到有需要的朋友。完结撒花~~
参考资料
[1] Hexo文档
[2] Butterfly 安装文档
[3] GitPages + Hexo,从0到1搭建个人博客