建立博客系列(三):hexo安装配置

翻墙

查一些资料,或者下载东西都得到一些国外网站,这里介绍一种翻墙的方式———修改hosts配置文件。

原理介绍

之前讲过我们输入域名,然后会去从域名解析服务器得到对应的ip然后访问。而一种“墙”的方式,是我们从域名解析服务器得到了无效的ip,所以使得Google,Facebook等不能进行访问。幸运的是,计算机是先从我们本地电脑中的hosts文件中查找域名对应的ip,如果没有的话才从域名解析服务器去获得。所以我们可以把Google,Facebook的ip都写到hosts文件中,这样就可以正常访问国外的一些网站了。

更改方法

虽然原理很简单,但即使这样做了,也不能保证我们一直正常访问,因为一些ip会直接被封掉,导致我们不能访问,所以我们得时常手动更新我们的hosts文件,那么多的ip一个一个找一个一个改也太麻烦了,这里感谢老D博客,我们只需要下载其帮我们写好的hosts文件,然后简单点几下就可以成功翻墙了,一段时间后不能翻墙,下载最新的重新配置就可以了。
1.打开hosts下载地址老D博客

2.选择一种方式进行下载

3.下载完成后解压,然后打开Windows自动替换脚本

4.输入1,点回车,如果电脑管家等禁止了,点允许

5.然后出现以下界面,试着访问 谷歌搜索Facebook,可以打开就意味着成功了。

Notepad++

因为后边会修改很多配置,所以需要一个文本编辑器,这里推荐Notepad++,百度搜索下载即可。

Hexo

hexo是一款基于Node.js的静态博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装node.js

简单的讲node是一个Javascript运行环境,下载地址node.js,选择Windows.msi,64位或32位即可,安装的时候除了更改安装位置一路Next即可。

打开git bash,输入 node -v,npm -v,出现下图即代表安装成功。

npm

NPM是随同NodeJS一起安装的包管理工具,我们可以使用它从服务器上下载其他的程序,例如这里hexo即可使用Npm下载,但由于安装国外的东西速度会很慢,所以这里先安装淘宝NPM,代替npm使用。安装后使用cnpm代替原来的npm命令即可。
打开git bash 执行命令

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装hexo

首先在之前的git目录(D:\git)新建一个目录,起名为blog

打开git bash依次执行命令
cnpm install -g hexo-cli
hexo init blog
cd blog
cnpm install
hexo s

打开浏览器 输入 localhost:4000,之前讲过域名这里的localhost其实代表ip127.0.0.1,回送地址,就是代表本地主机,而hexo的端口是4000。出现以下,代表hexo安装成功了。

相关命令

  • cd(change directory),即改变当前的路径,一打开git bash的目录是D:/git,而博客在blog目录里,所以一般先执行cd blog,进入blog目录
  • hexo clean,清除缓存文件 (db.json) 和已生成的静态文件 (public)
  • hexo g(或者 hexo generate),生成静态文件(public目录下)。
  • hexo d(或者 hexo deploy),将代码部署到Coding
  • hexo s(或者 hexo server),hexo运行在本地,在localhost:4000即可预览效果。
  • 如果命令输错了,按 ctrl+c 终止当前命令即可。

    部署到Coding

    打开之前创建的blog项目
    点击代码, 将SSH底下的地址复制一下

    用notepad++打开blog目录下的config_yml,也就是hexo的配置文件

    把下边的代码复制到最后,将coding后边的地址改成刚刚复制的那个地址,然后保存
    1
    2
    3
    4
    5
    deploy:
    type: git
    repository:
    coding: git@git.coding.net:wind_liang/blog.git
    branch: master


在git bash执行
以下命令注意都在blog目录下执行,如果当前不是blog目录,先执行cd blog,转到blog目录

1
2
3
cnpm install hexo-deployer-git --save
hexo g
hexo d

点开Coding的代码,出现了东西即代表成功

继续点开之前的pages服务,选择master保存即可,等几分钟出现以下界面即成功

如果要绑定域名,下边一步不要执行,即不要加 /blog/ 。如果不购买域名,则执行下边的(如果后来又买了域名,记得将这里的 /blog/ 改回到 / )。


用notepad++打开hexo的配置文件,即blog目录下的config_yml,在root处加入/blog/,记住冒号后的空格
现在访问http://你的名字.coding.me/blog即可访问你的博客了。


关联自己的域名

如果你之前买了域名,现在可以将你的域名解析到博客的地址上。

设置解析

打开阿里云,进入域名解析,点击自己的域名

点击新建,添加一个 CNAME 解析,地址写 你的名字.coding.me ,也就是把域名解析到域名

添加CNAME到Coding

打开Coding,pages服务,绑定域名

设置完成后,等待10分钟左右,若在浏览器中输入自己的域名可成功访问即可。

hexo 的简单配置

用notepad++打开hexo的配置文件,即blog目录下的config_yml。
修改以下几项,注意冒号后边有一个空格,除了language不变,其它的改成你自己的。

点击格式,转为utf-8无BOM格式(即支持中文的一种格式),然后记住保存

打开git bash,注意先cd 到blog目录
然后依次执行,hexo clean,hexo g,hexo d,然后进入自己的博客观察是否更改成功。

hexo 绑定域名(2017.8.12)

coding 推出了银牌会员,可以免费升级,绑定了自定义域名后,会先跳到下边的页面

我们需要在自己的博客加入 Hosted by Coding Pages ,审核通过就没有跳转的 pages 了

以 Next 主题为例

进入下边的路径

博客所在目录 \themes\next\layout_partials

使用 Notepad 编辑 footer.swig ,加入以下代码

1
2
3
4
5
6
<div class="powered-by">
Hosted by
<a class="theme-link" href="https://pages.coding.me">
Coding Pages
</a>
</div>

然后执行下边代码即可

1
2
hexo g
hexo d

会有下边的效果

然后在 pages 页面勾选已放置即可

然后等待审核通过。

windliang wechat