Home

拼搭小怪

智能体设计师


Blog Github
‹

万里长征第一步，博客搭建

Hi~，大家好我是拼搭小怪。2018 年的某天脑子突然一抽抽，决定开始学习 Machine Learning，所以有了这个博客。这个站有三个作用，一个是记录和监督自己的学习过程；一个是把从大牛那里学到的东西分享出来；还有一个是想结交一些小伙伴一同迈向机器学习的巨坑~

So~，首先要感谢大佬们把我从 VPS + WordPress 的巨坑中拉了出来。虽然之前的博客不太维护了，但每年还是白花了不少银子养着服务器。到现在才知道利用 Github 和 Coding 来搭建免费的博客，真是惭愧~。

为了回报社会，我也把我搭建博客的过程分享出来，能救一个是一个 [捂脸] ~

建站时的设想是使用 Hexo 作为博客的框架，写的文章分别发布到 Github 和 Coding。站点的域名统一为 makingagent.com。对于国内的同学域名解析到 Coding Pages，歪果仁解析到 Github Pages。下面就是按照设想一步步搭建博客的步骤。

Hexo

首先做好准备工作，安装好 Git 和 Node.js，使用 Node.js 的包管理工具 npm 安装 Hexo。

1
npm install hexo-cli -g

安装完成后运行下面的命令来构建整个博客目录。

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

接着启动本地 Hexo 服务，默认地址为 http://localhost:4000。

1
hexo s

打开默认地址，我们就能看到本地运行的 Hello world 博客啦。

Github Pages

我就说下 Github Pages 的创建，Coding Pages 基本可以举一反三。

  • 首先创建一个名为 <your_id>.github.io 的仓库，记得勾上自动创建 README。
  • 在仓库的 Settings 页面，滚到 Github Pages 位置，选择 master branch。
  • 在个人账号 Settings 页面下创建 ssh key，这是为了避免将来发布文章的时候要经常输密码。通常你只需要把 .ssh 目录下 id_rsa.pub 的内容复制粘贴进去就行了。如果默认的公钥 id_rsa.pub 不存在或者你要使用自己的公钥，可以通过 ssh-keygen 命令创建。还需要在 .ssh 目录下的 config 中添加下面的内容来让机器知道登录 git 仓库的时候使用哪个公钥。
Host github.com
HostName github.com
User git
IdentityFile ~/.ssh/makingagent_rsa
IdentitiesOnly yes

配置与发布

我们还需要在本地做一些配置才能将我们的博客发布到 Github 上。在 blog 目录下配置 _config.yml 文件最后的 deploy 部分，这里的 git 是通过 ssh 方式操作的。

deploy:
type: git
repository:
    github: git@github.com:makingagent/makingagent.github.io.git
    coding: git@git.coding.net:makingagent/makingagent.coding.me.git
branch: master

然后配置 git 提交时候的名字和邮箱。

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

cd 到 blog 目录下生成静态页面。

1
hexo g

部署你的博客，如果第一次运行失败的话先运行 npm install hexo-deployer-git --save

1
hexo d

自此你就可以通过 <your_id>.github.io 访问你的博客啦。

域名解析

这里使用 DNSPod 来做域名解析服务，所以你需要在你的域名服务商那里替换掉 DNS 的服务器地址，使用 DNSPod 的。

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

然后在 DNSPod 上创建一个新的域名解析，具体解析的配置见下图。

最后对于 Github 你需要在 blog/source 目录下添加一个 CNAME 文件，里面就写一行你的域名，比如 makingagent.com。而对于 Coding，你需要在项目的 Pages 服务中绑定你的域名。Coding Pages 默认先会跳转到一个广告页，如果想去掉的话一个是升级会员，还可以在博客页加上 Coding 指定的代码。

插入图片

本来正在申请七牛云存储来作为图床，然后突然发现 Hexo 官网说 Hexo 3 已经将一些常用插件加入到了核心代码里。所以开启图片功能只需要先配置 _config.yml 文件。

post_asset_folder: true

将 post_asset_folder 参数设置为 true 。不知道 Github 和 Coding 作为图床的速度怎么样，先试试看，之后不行再换七牛。要在文章中插入图片或资源就是用下面的代码。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

添加社交链接

要想添加社交账号的链接也是蛮容易的。比如你要为自己的主题添加社交账号链接功能，先在主题的配置文件中添加账号信息。

# social links settings
social:
    weibo: https://weibo.com/hertzcat
    zhihu: https://www.zhihu.com/people/makingagent
    twitter: https://twitter.com/hertzcat0

然后在需要添加链接的模板文件中加上如何显示这些信息就行了。这里社交平台的 icon 使用了 iconfont 上的。

1
2
3
4
5
6
7
8
9
10
<% if (theme.social) { %>
<br>
<div class="social-links">
  <% for (var name in theme.social) { %>
    <% if (name) { %>
      <a href="<%- url_for(theme.social[name]) %>" class="iconfont icon-<%- name %>" title="<%- name %>"></a>
    <% } %>
  <% } %>
</div>
<% } %>

数学公式

数学公式这个功能折腾了一两个小时。一开始使用 hexo-math 怎么都不成功，后来看了一些文章，理了下思路搞明白了。首先我们希望 hexo 的 markdown 渲染器跳过一定的标识比如 $$。然后要在网页中显示出公式我们只需要在页面上引用 MathJax 的 js 文件就可以了。所以根据网友的填坑经验我们先更换 render。

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

安装 hexo-renderer-mathjax 插件，功能是帮你改写 MathJax 能够识别的 Html 标签。

1
npm install hexo-renderer-mathjax --save

对于最新版本的 Hexo，并不需要添加 plugins。然后我们在主题的 _config.yml 文件中放上 cdn 和开关参数方便配置。

# MathJax support
mathjax:
    enable: true
    cdn: //cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-MML-AM_CHTML

最后在模板文件中合适的位置添加 MathJax js 的引用就可以了。我的话是新建了一个文件，然后使用 enable 来判断是否加入 js 文件。

1
<script type="text/javascript" src="<%- url_for(theme.mathjax.cdn) %>"></script>
1
2
`$a + b = c$` 行内公式
$$a + b = c$$ 单行公式

常用功能记录

  • hexo new "postName" 新建文章。
  • hexo new page "pageName" 新建页面。
  • hexo clean hexo g hexo d 写完文章后的发布。
  • hexo s 本地预览。
  • 修改 _config.yml 中的 theme 参数可以跟换主题，主题存放在 blog/themes 路径下。

之后还会对这个博客进行不断的更新迭代，添加的功能都会记录到这里。


拼搭小怪

2018-03-11

Blog Github