创建一个blog
其实从初中开始接触简单编程,一直有个写blog的想法,一直没有去实施,一是自己以前喜欢把技术记录在本子上,二是总喜欢做着喜欢的事情而忽略了这一茬子事,去年年底和一个同学本来搭了一个网站,但是由于双方都没有更进,所以今年趁着研究生上岸后开始搭一个属于自己的网站,记录生活,记录学习也顺便记录下自己所钟爱的计算机技术。
如何利用github pages制作属于自己的hexo blog呢?
什么是Hexo?
Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。即把用户的markdown文件,按照指定的主题解析成静态网页。
准备环境
准备 node 和 git 环境,
首先,安装 NodeJS,因为 Hexo 是基于 Node.js 驱动的一款博客框架。
然后,安装 git,一个分布式版本控制系统,用于项目的版本控制管理,作者是 Linux 之父。如果 Git 还不熟悉可以参考廖雪峰大神的 Git 教程。
两个工具不同的平台安装方法有所不一样,可自行了解按步骤安装,这里不详述了。安装成功后打开git bash(Windowns)或者终端(Mac),下方中将统一称为命令行。
在命令行中输入相应命令验证是否成功,如果成功会有相应的版本号。
1 | |
安装Hexo
如果以上环境准备好了就可以使用 npm 开始安装 Hexo 了。也可查看 Hexo 的详细文档。
在命令行输入执行以下命令:
1 | |
安装 Hexo 完成后,再执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
1 | |
新建完成后,指定文件夹的目录如下:
1 | |
好了,如果上面的命令都没报错的话,就恭喜了,运行 hexo s 命令,其中 s 是 server 的缩写,在浏览器中输入 http://localhost:4000 回车就可以预览效果了。
以下是我本地的预览效果,更换了 ayer 主题的,默认不是这个主题。
至此,你本地的博客就已经搭建成功,接下来就是部署到 Github Page 了。
注册github
首先如果你还没有 Github 账号的先注册一个,具体过程省略。
接下来点击 Start project 或者下面的 new repository 创建一个新的仓库。
注意点来了,Github 仅能使用一个同名仓库的代码托管一个静态站点,这个网上很多教程没说到的。
配置SSH key
要使用 git 工具首先要配置一下SSH key,为部署本地博客到 Github 做准备。
打开命令行输入 cd ~/.ssh 如果没报错或者提示什么的说明就是以前生成过的,直接使用 cat ~/.ssh/id_rsa.pub 命令就是可以查看本机上的 SSH key 了。
1 | |
如果之前没有创建,则执行以下命令全局配置一下本地账户:
1 | |
然后开始生成密钥 SSH key
1 | |
按照提示完成三次回车,即可生成 ssh key。通过查看 ~/.ssh/id_rsa.pub 文件内容,获取到你的 SSH key
(上图来自于互联网)
首次使用还需要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容,则证明添加成功。
1 | |
到这还没完,还要登录 Github 上添加刚刚生成的SSH key,按以下步骤添加:
创建一个新的 SSH key, 标题随便,key 就填刚才生成那个,确认创建,搞定!!这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。
部署到Github
此时,本地和Github的工作做得差不了,是时候把它们两个连接起来了。你也可以查看官网的部署教程。
先不着急,部署之前还需要修改配置和安装部署插件。
第一:打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾,填上如下配置(也可同时部署到多个仓库,后面再说):
1 | |
第二:要安装一个部署插件 hexo-deployer-git。
1 | |
最后执行以下命令就可以部署上传啦,以下 g 是 generate 缩写,d 是 deploy 缩写:
1 | |
在浏览器访问网址: https://你的用户名.github.io 就会看到你的博客啦!!
开始写作
博客搭好了,就开始写文章了,这里简单介绍一下,详细的文档可以看 hexo 官网。
这里我推荐Typora,特别好用适合新手,使用方法点前面的Typora单词即可。(引用别人的Typora 文章)
具体写Markdown就看一下上述链接就可以啦!再将md文件放入hexo主目录下的_post文件下,依次执行下述指令:
1 | |
就可以看到你的文章在博客显示了
最后,只要部署到你的 Github 上就可以了!依次执行下述指令
1 | |
部署前最好能先执行一下 hexo clean 命令,清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。
静态图床
文章里用的一些图片放哪里比较好呢?比对了几个免费的图床,我发现了聚合图床贼好用,推荐大家使用,特别方便,打开网站就会。
小插件的使用(可供选择)
- hexo-generator-index-pin-top 用于文章置顶
- hexo-blog-encrypt 用于文章加密
- hexo-tag-aplayer 用于播放音乐
- hexo-tag-dplayer 用于播放视频
- hexo-helper-live2d 二次元看板娘
更多插件请见 hexo插件市场
使用方法Github上都有,主要是英文啦,所以说学好英文很重要啦
绑定域名
如果你感觉直接使用 github.io 的域名作为你的博客链接不够专业,不够程序员的话那么就购买一个域名解析绑定到你的博客,我也比较建议这样做。
我用的godaddy 和 Dnspod,使用起来也比较方便
第一步,在DNSPOD上添加域名
首先,进入DNSPOD官方网站,用你的账号登录。
登录后,进入DNSPOD控制面板,选择“我的域名”模块。在“我的域名”页面,有一个【添加域名】按钮。如图片一所示。
点击该按钮,这时比如我要解析xxx.com ,直接输入你想解析的域名进去。(注意,输入域名时,不要带www)。如图片二所示。
点击【确定】,这样就添加了一个域名到DNSPOD了。
第二步,设置域名参数
添加好之后,需要为域名设置各种参数,如A记录,NS地址等。
点击刚才添加的这个域名,进入域名设置界面。在这里,你可以看到DNSPOD已经为你提供了2个NS(Name Server)地址,你需要把这2个地址,在GoDaddy后台控制面板中进行设置(后面会讲)。如图片三所示。
除了NS地址,在域名设置界面,你还需要添加A地址,也就是“记录类型”选A。
点击【添加记录】按钮,在弹出的设置区域中,需要设置“主机记录”、“记录类型”、“线路类型”、“记录值”、“TTL”等参数。如图片四所示。
图片四中,“主机记录”,是指你的域名前缀(如www)。因为一个域名,本身是没有任何前缀的,需要单独设置。比如,你想通过blog.xxx.com 来作为你博客的访问入口,则需要在“主机记录”那里添加“blog”。当然,如果你不打算通过任何前缀访问你的主域名,那么,在“主机记录”那里输入 “@”就可以了。
“记录类型”,包括A记录、CNAME、MX、NS等各种记录类型。如果需要把域名映射到你的主机上,选择“A”,然后,在“记录值”那里输入主机地址即可(通常是一个IP)。
“TTL”,是Time To Live的缩写,指DNS缓存的生存时间,单位为秒。通俗来讲,就是DNS缓存你的域名记录信息的时间,当缓存失效后,会再次到DNSPOD获取记录值。一般来讲,使用600(即10分钟)是比较合适的。
其他参数,使用默认值即可。
参数添加完之后,点击【确定】,一条新的记录就设置好了。
如果需要添加其他记录,按照上面的步骤,填入适合的参数进行设置。
第三步,在GoDaddy上修改NS
由于你的域名是在GoDaddy上注册的,也就是说,GoDaddy是该域名的托管商。因此,需要到GoDaddy的控制面板,指定域名的NS服务器。
既然我们打算使用DNSPOD来解析域名,因此,在GoDaddy控制面板就需要把域名的NS设置为DNSPOD提供的地址。在上面第二步中,DNSPOD已经提供了2个NS地址,我们只需要把这2个地址添加到GoDaddy域名NS即可。
进入GoDaddy域名控制面板(登录后,在“My Account”模块下面),目光移向“Nameservers”区域,在该区域有一个“Set Nameservers”链接。这里就是设置域名NS的入口了,如图片五所示。
点击“Set Nameservers”链接,GoDaddy会弹出一个Nameservers设置界面,如图片六所示。在这个设置界面,选择“I have specific nameservers for my domains”单选按钮,在下面的文本框中,输入DNSPOD所提供的2个NS地址,设置好之后,点击【OK】,大功告成!
这个时候,你只需要泡上一杯咖啡,等待10-15分钟,域名解析就能够生效啦!
Github 添加域名
记录添加完后就要到 Github 设置绑定你购买的域名了,进入你的博客仓库点 Setting,然后拉到 GitHub Pages 那里填上你的申请购买的域名保存就可以了
然后github你的repository目录就会有CNAME文件
这里面便是你所绑定的域名,这时候在浏览器上输入你的域名就可以进你的blog啦!
结尾
到这里就差不多啦!后续技术可以继续更近,ayer主题里面还有很多小插件,hexo也可以安装很多插件,喜欢技术的小伙伴可以继续倒腾,争取做得更好,本人技术有限,难免表达不顺,有问题可以留言评论或者给我发邮件加qq哦,感谢阅读!:)