Hexo+GitHubPages 建站教程(2019详细)

Hexo+GitHubPages 建站教程(2019详细)

费劲一番周折😂,终于成功地建成了一个自己的博客。在此,就把我自己建站的经验写成教程,以供参考。

建站方法优劣:

  优:耗资少;简单,适合初学者;网上教程多;有大量国内开发者。

  劣:博文多了之后生成速度变慢

  本机环境:Windows 10 x64 专业版

准备条件:

  安装node.js

  安装Git

  安装Visual Studio Code

  以管理员身份运行cmd

进入正题

由于直接使用npm install指令在国内下载速度有时较慢,所以可以安装cnpm来替代npm:

1
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装hexo
1
cnpm install hexo-cli -g
生成博客文件
1
2
3
hexo init file  #init后的file用文件目录替代
cd file
cnpm install
安装插件
1
2
cnpm install hexo-server --save     #生成本地服务器所需插件
cnpm install hexo-deployer-git --save #使用git方式进行部署博客所需插件

现在,一个博客的雏形就完成了。

创建GitHub仓库

打开GitHub并注册/登录。

然后点击右上角“+”号创建仓库

创建仓库

名称可以随便取,也可以用“自己的账户名称.GitHub.io”的形式,后者以后可直接访问https://账户名称.GitHub.io/打开博客。随后点击Create repository。

在随后出现的页面中复制HTTPS地址,

复制HTTPS

打开刚才生成博客的文件目录,找到名为_config.yml的文件,翻到底部,添加代码

1
2
3
4
deploy:
type: git
repository: https://github.com/JerryGaoY/hyiontek.git #填写刚才复制的内容
branch: master

修改主题

打开Hexo主题,自选主题。以我的博客为例,我用的是Icarus主题。回到cmd,在博客文件目录下输入代码:

1
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

接下来,请将博客根目录下的_config.yml中的主题设置改为icarus:

1
theme: icarus   #记得":"后加空格

(另外,由于Icarus主题发布者没有在GitHub 仓库 master branch中发布主题配置文件_config.yml,所以我到他的site branch中下载了_config.theme.yml文件,修改文件名复制到themes/Icarus目录,其他主题一般不会遇到这种问题,不多赘述)

然后,根据主题发布者提供的教程,修改themes目录下的_config.yml。

修改完成,再回到cmd输入

1
2
hexo g
hexo s

如果不出错,这时候可以在http://localhost:4000/查看效果,查看完,回到cmd,按Ctrl+C退出。

撰写博文

在cmd中输入

1
hexo new 模板 文章文件名

模板 处有三种类型,如下
|参数|功能|路径|
|:-|:-|:-|
|post|新建文章|/source/_posts/|
|draft|新建草稿|/source/_drafts/|
|page|新建页面(标签页,分类页等)|/source/|
找到生成的.md文件,用Visual Studio Code打开,进行编辑。编辑器遵守Markdown语法。单机右上角图标进行预览

vscode Markdown预览

上传前的准备

如果想绑定自己注册的域名,就打开博客文件根目录中的source文件夹,新建.txt文件,修改文件名为CNAME(不要后缀名,大写),用记事本打开,输入域名,以本人的为例:hyiontek.com 保存。

上传到GitHub仓库

在cmd中输入

1
hexo d

在弹窗中登录GitHub账户即可

域名解析

打开CloudFlare,注册,按照提示绑定域名,如图进行配置

DNS配置

按照提示到域名注册商处修改dns服务器为cloudflare提供的服务器,完成配置。

评论

Gravatar·修改头像 | QQ邮箱·意见反馈
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×