盒子
盒子
文章目录
  1. GitHub Pages
  2. 前期准备
    1. 安装Hexo
    2. 测试安装状态
  3. 正式开始
    1. 建站
    2. 同步Hexo博客到Github
  4. NexT主题配置
  5. 优化环节
    1. 域名设置
    2. 其它四条
    3. 实现https访问
  6. 常用命令
  7. 推荐文章
  8. 所遇问题
  9. 相关网址
  10. 联系我

Mac搭建Hexo博客流程记录,排雷完成

经过一天的辛苦作战,总算基础的东西出来了。踩了太多的坑,综合我踩坑的经过,明白到,选好一篇引导文很重要!有些步骤不要先做了,不然后面会把你坑的很惨..

很多博客都已经详细讲述了Hexo博客框架的好处和怎么做,下面的推荐文章里会给出链接。但有些过于复杂,让初次配置的人有点雨里雾里;有些又太简单,出了问题就会不知道怎么回事。下面是自己的搭建记录,及所遇问题的解决

在此感谢小马哥Markwingjay先前分享的教程,有些段落是从你们里搬运过来的,希望博主见谅,如有侵权,请联系我删除。

Ok,现在开始:

GitHub Pages

在不购买服务器的前提下,我们的网站需要挂在GitHub Pages上。GitHub Pages是面向用户、组织和项目开放的公共静态页面搭建托管服务,可用于搭建个人博客。

  • 首先你需要拥有一个GitHub账号。
  • 然后进入GitHub Pages,一步步做,完成后就能在浏览器打开http://username.github.io了。

至此,我们已经利用GitHub Pages搭建好了个人博客雏形了。下面要做的,就是个性化了。

注意:如果你http://username.github.io首页就要是博客首页的话,建议初次配置选择首页,就是这样。完成后可以把index.html给删了,因为到最后你发现那是没用的,它将会给你造成干扰。

前期准备

安装Hexo

参考中文文档英文文档。完成该步后,你的电脑便拥有了Git、Node.js和Hexo。

测试安装状态

1
2
3
4
5
6
7
$ node -v
v4.2.4
$ npm -v
2.14.12
$ hexo -v

正式开始

确定拥有了Git、Node.js和Hexo后,进行下一步:

建站

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

这样Hexo会在该文件夹创建本地博客所需的一切资源。这样本地博客就搭建好了,输入以下命令:

1
hexo s --debug // 启动本地hexo 服务器,默认localhost:4000可以访问,可以看到调试信息

这样就开启了一个本地博客服务器,打开浏览器,在地址栏输入localhost:4000,就可以查看本地博客了,hexo默认生成了一片hello world博客。出现问题可以看terminal终端错误信息。按control + c关闭调试。

注意:以上hexo开头的命令,执行目录必须是你创建的博客文件夹目录。使用hexo s 也可以,只是没有了调试信息。

同步Hexo博客到Github

现在你已经可以在本机查看你的博客了,但是要想让别人通过网络可以查看你的博客,还需要一步,那就是将你的博客发布到github仓库。在terminal终端,将当前目录切换到你的本地博客目录,执行以下命令:

1
npm install hexo-deployer-git --save

安装完成之后,打开本地博客目录的_config.yml文件,编辑其中的deploy节点:

1
2
3
4
deploy:
type: git
repo: https://github.com/youlookwhat/youlookwhat.github.io.git
branch: master

注意:字段前需加空格,hexo有严格的格式规范。

保存配置之后,你可以不着急传到仓库,先刷新本地博客,看是否还是原样,如有问题可以看到terminal终端上的错误信息,然后检查没问题为止。

确认无误之后,在本地博客目录执行以下命令:

1
2
3
hexo clean // clean本地项目,防止缓存
hexo g // 全拼是:hexo generate,可以简写成 hexo g; 根据你编辑的md格式的博客,生成静态网页
hexo d // 全拼是:hexo deploy,可以简写成 hexo d; 将本地博客发布到github

然后,在浏览器地址栏输入username.github.io就可以访问你的博客了,别人也可以通过这个地址访问你的博客。如果错误请重复看以前流程,或参考其他文章,也可以联系我.

NexT主题配置

Hexo主题非常多,可以参考丰富多彩的Hexo主题,本文选Next为主题,NexT主题是一套简约的主题,设置完成之后,就像我的博客现在的样子,里面有详细的配置说明,这里就不重述了。

配置后调试:

1
2
3
hexo clean
hexo g
hexo s --debug

确认无误后上传:

1
2
3
hexo clean
hexo g
hexo d

注意:因为hexo有严格的格式规范,所以建议配置时及时调试页面。

优化环节

域名设置

大家可以看:替换自己的域名 ,里面讲述的详细。

注意:在万网买了域名以后直接在里面配置,这里只是参考用的。

其它四条

大家可以看:其他遗漏的点

注意:配置后进入调试模式测试一下,这样错了就可以马上更正。

实现https访问

2018年3月16日补

CloudFlare是一家CDN提供商,它提供了免费的https服务(但不是应用SSL证书)。
参考链接:

注意:1.需要在阿里云服务器里更改NDS服务器地址,原来地址为dns15.hichina.com ; dns16.hichina.com

NDS修改

常用命令

cd 到仓库所在文件夹目录下:

1
2
3
4
5
6
7
hexo init //在指定目录执行该命令,会将当前目录初始化为hexo站点,生成hexo站点所需的一切文件
hexo new “my new blog title” //新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
hexo s --debug // 启动本地hexo 服务器,默认localhost:4000可以访问
hexo clean // 清除缓存,如果对本地文件做了修改,同步到远程验证修改的效果之前,先clean,清除缓存
hexo generate // 可以简写成hexo g 根据markdown文件生成静态文件
hexo deploy // 或者简写成hexo d 将本地修改,部署到远端
hexo version // 显示hexo版本

推荐文章

所遇问题

  • 按照步骤来,及时调试,确认无误后再执行下一步。有一句话说的好,步子跨大了容易扯着蛋。
  • 建议将基础的先搭建出来,主题细节可以之后再慢慢配置。
  • 编辑站点_config.yml文件其中的deploy节点时,注意repo的值。
  • 替换域名时:
    • 直接在万维网设置解析方式;
    • 在仓库Setting的要设置跳转链接;
    • CNAME会被覆盖,安装CNAME工具hexo-generator-cname
  • 为博客文章添加阅读量统计功能,参照这里,注意顺序,我在其中被坑过。
  • 设置网站图标时,就是上传“.ico”文件时,确认成功后浏览器会有缓存,显示不出来,关掉浏览器清除缓存就好了(可放在最后)。
  • 设置代码高亮主题测试时没事,上传后会有延迟,等等就好了(本人这样)。
  • 设置搜索栏,进入swiftype官网,注册不上,应该收费了- -.
  • 设置侧边栏社交链接时,social:下面字段前要有两个空格,切记

相关网址

NexT多说百度统计leancloud阿里云fork meico制作Cloudflare

联系我

支持一下
扫一扫,支持我
  • 微信扫一扫
  • 支付宝扫一扫