Fork me on GitHub

利用Github Pages + Hexo搭建免费个人博客

你好,世界!

Hello,World!

今天我来教大家如何搭建像我这样的博客,主要基于Github Pages和Hexo,具体细节可看:Hexo.io

1. 准备搭建环境

  • 安装 Git

Win:https://git-scm.com/download/win

由于众所周知的原因,从上面的链接下载git for windows最好挂上一个代理,否则下载速度十分缓慢。也可以参考这个页面,收录了存储于百度云的下载地址。

Mac:使用Homebrew, MacPortssudo brew install git;或下载安装程序安装。

  • 安装 Node.js

下载地址:http://nodejs.org/

对于windows用户来说,安装时,请勾选Add to PATH选项。

2. 安装Hexo

win键 + R,输入cmd,打开命令提示符,输入命令

npm install -g hexo-cli

安装一下hexo-deployer-git模块,输入命令

npm install hexo-deployer-git --save

3. 注册Github

Github:https://github.com/

注意Username(用户名)的取名,因为建好后你的初级域名是:

https://[你的用户名].github.io

然后建立新仓库

注意Repository name(仓库名)必须是

[你的username].github.io

建好后先停留在这个页面

4. 建站

由于以后经常要在博客文件夹打开cmd,对于window用户,推荐大家看看这个页面,完成注册表操作。或打开这个页面,下载opencmdhere.reg,双击完成操作。

之后推荐找个地方新建文件夹,右键即可打开cmd(如果完成上面的操作)。

以下皆在命令提示符下操作

1
2
3
4
> hexo init <folder> 回车 | 例子:hexo init myblog
> cd <folder> 回车 | 例子:cd myblog
> npm install 回车
>

细节看官网页面

5. 与Github pages进行关联

用文本编辑器打开_config.yml,滚到最下面,添加如下配置信息(注意最下边有deploytype字段,覆盖这两个字段或者删除这两个字段然后复制下面的四个字段也行。):

deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: master

把其中repo字段替换成你的Github Page提交代码的git地址,就是停留的页面里的那一行链接。

之后在你的站点文件夹(按照例子,就是myblog下)打开cmd,输入hexo s,如果成功会打印类似

Hexo is running at http://localhost:4000/. Press Ctrl+C to stop的一句话,再打开你的浏览器输入localhost:4000地址,即可打开你的博客界面。

6. 发布你的博客至Github Page

之前只是在本地运行你的博客,还不能在互联网上登陆你的博客。

Press ctrl+C to stop之后,在cmd端依次输入以下命令

hexo clean 回车

hexo g 回车

hexo d 回车

命令详解,第一条是清除缓存,第二条命令是生成本地发布文件夹,第三条命令才是最后的发布到Github Pages上。更多的hexo命令操作请参考官方文档即可。

第一次在hexo d需要登录你的Github账号。

之后就是见证奇迹的时刻,在浏览器地址栏输入

[你的username].github.io

即可打开你的个人博客啦!

如果成功了,欢迎在评论里留下你的博客地址哦!😜


7. Hexo主题

初始主题是Landscape,不是太好看,我使用的是Next主题,Next官网

releases页面下载Source code(zip),解压到站点文件夹(比如myblog)的themes里,把文件名改成next

然后在站点文件夹(myblog)下,用文本编辑器打开_config.yml

找到如下界面,并把landscape替换为next

然后在站点文件夹(myblog)下打开cmd,在cmd端依次输入以下命令

hexo clean 回车

hexo g 回车

hexo d 回车

crtl+F5刷新,即可看到你的博客页面已变成Next主题了。

当然你也可以换其他主题,操作类似。

我还进行了一些细节上的配置,使我的博客变成现在的风格。具体操作时隔久远,我也已经忘记,不过通过搜索应该可以找到。如果你想要节约时间,可在文章底部打赏2元(备注你的邮箱),我通过邮件把我本地修改好的next主题打包发给你。

8. 平时更新博客基本操作

首先,需要学习Markdown

推荐这篇文章——认识与入门 Markdown

推荐Markdown文本编辑器——Typora

在站点文件夹(myblog),打开cmd,输入hexo n [markdown文件名],比如我这篇即hexo n world,然后进入source文件夹,在进入posts,即可看见你创建的Markdown文件,然后进行博文的编辑即可。

编辑完之后,在站点文件夹(myblog),打开cmd,依次输入

hexo g 回车

hexo d 回车

再登陆你的博客,发现博文已更新。

  • 插入音乐

Hexo博客中插入音乐

  • 添加Valine评论

hexo博客评论新神器——Valine

9. 设置二级域名(可选)

你可能不满意这个域名,Github Pages可设置二级域名。

我是使用Freenom提供的免费域名,一年后到期。

然后在你的本地站点目录里的source目录下添加一个CNAME文件,不带后缀,效果如下

然后在Settings页面,填入自定义域名。

Github Pages可以强制启动HTTPS了,勾选Enfroce HTTPS。因为我之前是用Cloudfare进行HTTPS加密的,所以没有勾选。

然后重新hexo ghexo d,等待DNS生效即可使用二级域名访问。

参考资料:

1.我的博客是如何搭建的(github pages + HEXO + 域名绑定)

2.GitHub Pages+Hexo+cloudflare搭建博客并启用https整套方案


以上就是我的博客搭建的基本流程,如在操作过程中出现问题,可评论或发邮件联系我。我的Email:[email protected]

本文标题:利用Github Pages + Hexo搭建免费个人博客

文章作者:FKT

发布时间:2018年04月21日 - 19:04

最后更新:2019年01月07日 - 22:01

原始链接:https://freeknight.cf/2018/04/21/World/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢您的阅读-------------
坚持思考与分享,您的支持将鼓励我继续创作!