前言
注意:过程中使用了 Github 相关功能,需要科学上网,因此自行斟酌可行性。
之前兴致冲冲的搭建了一回博客网站,但是动态元素太多,加载起来比较慢,整体风格也不是很喜欢。
新学期趁着总结文档的机会,花了两天的时间把整个流程重新走了一遍,此外还上了点难度,下狠心去找一个自己很喜欢的风格,也就是现在在用的 hux blog 模板。hexo 下的作者是 kaijun,原作者是 黄玄,都是非常顶级的大佬,据我所找的信息来看是这个模板已经不在更新了(至少 hexo 下的是这样的),所以建议去 hexo 官网下找自己喜欢的主题,这会省非常多的力气。
我目前使用的模板是大佬直接改了一些框架文件,不是单纯在主题文件夹中进行修改,因此不建议刚上手就使用这个。
当然以上这些都是后话,下面一步步从域名开始讲,争取能达到预期的细致效果。
整体框架介绍
博客相当于是个人网站,但又不同于正式的网站,正式个人网站相当于动态博客,需要自己购买域名和服务器,还要走审批流程,成本实在是太高了,服务器的成本一年就很贵,还要定期的去维护它,对于大多数人来说,实在是得不偿失。
当然现在市面上的博客也很多,如CSDN,博客园,简书等平台,可以直接注册账号进行发表,并且收获点赞与关注。但是平台本身的存在限制了我们的自由性,可能是审核问题,也可能是美观问题,所以我们找到了第三种选择——静态博客。
静态博客就是直接在 GitHub 上对博客进行托管,创作者只需要专注于创作本身,省去了维护的过程,并且 hexo 的存在使得博客搭建非常容易,不需要去手撕 html 或者是 css。
Hexo 是基于 Node.js 的静态博客框架,在该框架下写 markdown 文件,配置 yml 文件,就可以直接运行命令生成静态网页,再将静态网页放到 GitHub 上就可以了。
详细内容可以进入Hexo官网进行查看,框架作者是台湾人,因此 Hexo 对中文是十分友好的。
搭建流程
1. 安装 Git
首先需要安装 git,是世界上最先进的分布式版本控制系统,具体的功能是十分强大的,建议每个学习编程的哥们都或多或少学一点。
在这里,我们把 git 用于管理博客文章,充当上传到 GitHub 的工具。windows 下到 git 官网进行下载,下载后会有一个叫 Git bash 的命令行工具,后续指令的执行就是在这个里面进行。
安装后在桌面右击选择 Opem Git Bash here 进入 Git 命令行界面,用 git --version
指令可以查看版本。
2. 安装 nodeJS
Hexo 是基于 nodeJS 编写的,所以需要安装 nodeJS 以及其对应的 npm 工具,windows 下到官网进行下载。
这个具体功能是什么,我查了一下是一个 javascript 的运行环境,所以我想应该是和 hexo 生成网页的过程有关系,因为不太了解 Java 前端,所以就此先打住,下载安装就完事了。
3. 安装 hexo 及初始化
下面的指令其实打开Hexo官网就可以看到,用的是官方安装流程,因此不作太多讲解。
先在一个合适的地方创建你的存放博客项目的文件夹,然后点进去这个文件夹,右击选择 Opem Git Bash here 进入 Git 命令行界面。
输入命令:
1 | npm install -g hexo-cli |
用 hexo -v
查看一下版本确保安装成功。
接下来进行初始化:
1 | hexo init myblog |
再安装 npm:
1 | npm install |
以上命令执行完成后,文件目录如下所示:
其中:
- node_modules: 依赖包
- public:存放生成的页面(此处还没有生成)
- scaffolds:生成文章的一些模板
- source:用来存放你的文章
- themes:存放主题
- _config.yml: 博客的配置文件
运行命令:
1 | hexo g |
然后按住 Ctrl 点击生成的网址即可进入本地预览界面,以后需要预览都可以这样操作。 hexo g
用来生成页面文件, hexo s
用来获取本地预览链接,在命令行界面使用 ctrl+c 可以把预览服务关掉。
4. Github 仓库设置
GitHub 账号注册这一块儿可能需要科学上网,具体注册流程也不需要过多赘述,因此不作讲解。
登录 Github 账号,界面应该如下所示:
左上方点击绿色按钮新建仓库,下图所示区域中添加仓库名字为和你用户名相同的仓库,后面加 .github.io
例如我的仓库名字为 astronauting.github.io
。
其他不用管,直接创建即可。
回到 git bash 命令行中,执行如下命令:
1 | git config --global user.name "yourname" |
这里的 yourname 输入你的 GitHub 用户名,youremail 输入你 GitHub 的邮箱。这样 GitHub 才能知道你是不是对应它的账户。
执行完以后通过以下指令检查是否输对:
1 | git config user.name |
然后执行下列命令创建 ssh,执行后一路回车:
1 | ssh-keygen -t rsa -C "youremail" |
程序会显示.ssh的文件夹,在你的电脑中找到它。
ssh 就是密钥,id_rsa
是私人密钥,id_rsa.pub
是公共密钥,我们在这里使用公共密钥,把这个公钥放在 GitHub 上,这样当你链接 GitHub 自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过 git 上传你的文件到 GitHub 上。
打开 Github 的 setting 页面(注意不是你仓库的设置界面),找到 SSH keys 的设置选项,点击 New SSH key,把你的 id_rsa.pub 里面的信息复制进去。( id_rsa.pub 直接用记事本打开就可以看到里面的东西)
运行如下命令查看是否成功:
1 | ssh -T git@github.com |
5. 将 hexo 部署到 GitHub
打开站点配置文件 _config.yml
,移动到最后一行,修改如下(注意 YourgithubName 就是你的 GitHub 账户):
1 | deploy: |
这个时候需要先安装 deploy-git ,也就是部署的命令,这样你才能用命令部署到 GitHub:
1 | npm install hexo-deployer-git --save |
然后:
1 | hexo clean |
hexo clean
清除了之前生成的页面文件,可以不加。hexo g
生成页面,hexo d
部署页面,也可以在部署前通过 hexo s
预览你即将部署的东西。
部署时第一次可能会要求输入账号和密码(GitHub),正常输入就行。
出现如下文字表明部署成功:
在 http://yourname.github.io
这个网站就可以看到你的博客了。
6. 设置个人域名
上面的网址其实相当于是 Github 的页面托管网址,如果你想要自己的,注册一个阿里云,在阿里云上购买域名,选择小众点的域名其实很便宜,一年也就几十块钱。不同后缀的价格是不一样的,我的 top 后缀在里面就算是便宜的后缀,不影响其他,纯粹看个人喜好。
购买完成以及实名认证后,域名控制台中就可以看到购买的域名,点击解析进去添加解析。
直接从我们的域名解析到 GitHub 仓库就行。
然后在 GitHub 中进入之前创建的仓库界面,点击 setting >> pages ,custom domain 部分添加自己域名点击 save 即可。
在你的博客文件夹下的 source 中创建一个名为 CNAME 文件,不要加后缀,写上你的域名。
重新 hexo clean、hexo g、hexo d 即可,不用多久进入你的网址就可以看到你的博客了。
运行如下命令新建博文:
1 | hexo new XXX |
一些后话
主题可以在官网里面进行选择想要的,然后下载下来把文件夹放到 theme 下,再在项目文件 _config.yml
中下述部分进行修改,把名字改成你的主题名就好啦。
配置文件中 url 的部分记得改成自己的网址,否则可能会有定向问题。
页面中所有的外观、部件等参数的调整都在主题文件夹下的 _config.yml
中,而主页面的一些必要调整则在项目文件夹下的 _config.yml
中,修改这两个配置文件就可以修改几乎全部的外观设置。
至于每篇博文一些要素的添加(例如数学公式、标签分类等)可以看 hexo 的官方文档,写博文时注意要用 markdown 语法去写,这个可以直接找到相关教程。
markdown 文件的书写并不难,只需要用到的时候搜对应的功能即可,其对代码书写记录十分友好,强烈建议使用这种语法写文档。
过程中可能出现 hexo d 报错情况,出现这种情况先在控制台中输入 ping github.com
确定是不是网络的原因,之后可参考此处进行解决。
如果本地部署预览看起来好好的,到了线上发现完全不一样,可以看看这篇文章。
还有很多深入的功能没有去研究,但我目前的方向并不打算往前端去靠,所以到达目前这个满足自己使用的阶段就好,希望跟着这篇教程,每个感兴趣的人都可以顺畅自如的学会部署自己的个人博客。