Qian Li / 李倩

Qian Li / 李倩

postdoc. in Knowledge Graph Beijing University of Posts and Telecommunications (BUPT) li.qian@bupt.edu.cn

个人网站搭建

1 minute read

Published:

1. 博客分类

常见的博客平台有几种：

  • 类似新浪博客、网易博客这样的网页版博客
  • 自己购买主机、域名，用WordPress搭建博客
  • 在GitHub等网站上使用其Pages功能搭建静态博客

本次使用第二种、第三种，也就是先使用GitHub Pages搭建个人主页（单页面主要是个人简介、paperlist），再使用WordPress搭建个人网站（多页面包括技术分享、学术分享等）。其实可以不购买主机，只购买域名，将域名映射到Github Pages构建的静态博客上即可。但对于.cn网站的备案必须要有国内的服务器，所以可以买个很短时间的服务器来备案。

2. 搭建个人主页

参考文献
搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门
GitHub Pages
静态博客框架之Hexo & Jekyll
我的个人博客之旅：从jekyll到hexo

2.1 需求

很久之前我的指导老师就跟我说整个个人主页及小组主页，来介绍我们的工作。主要是因为我俩的名字太常见了，直接使用搜索引擎很难搜到个人介绍，及准确的文章列表。
其实这个需求很简单，不用像常见的个人博客那样麻烦，个人博客的重点在于不断更新博客文章，而且要有复杂的分类。而我们的个人主页仅需个人简介、研究介绍、个人经历、文章列表、参与项目、所获荣誉等几大模块，更新东西很少的。参考陈天奇的个人主页。

2.2 工具选择

阮一峰 - 喜欢写Blog的人，会经历三个阶段

  • 第一阶段，刚接触Blog，觉得很新鲜，试着选择一个免费空间来写。
  • 第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。
  • 第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。
    …

但是两年前，情况出现变化，一些程序员开始在github网站上搭建blog。他们既拥有绝对管理权，又享受github带来的便利—-不管何时何地，只要向主机提交commit，就能发布新文章。更妙的是，这一切还是免费的，github提供无限流量，世界各地都有理想的访问速度。

正如文中所说，使用GitHub Pages可以用于绝对的控制权，有避免了个人管理独立博客的麻烦。所以个人主页搭建工具上选择GitHub Pages.

实际上，我并不需要构建静态博客的框架，因为我只需要构建一个单页面，不会需要使用Markdown更新博客。所以使用HTML+CSS这种完全静态的方式编写就可以。

2.3 模板选择&使用

使用 https://academicpages.github.io 给出的学术模板，比较成功的案例是一位与我同龄大牛于文涛的个人主页，他是SeqGAN的发明人。

该模板是基于Jekyll主题Minimal Mistakes主题修改而来，所以需要使用Jekyll框架。 该框架的内容、meta数据都是使用Markdown文件间存储，提供很多不同的将内容、meta数据转换成不同的HTML页面。每次commit、push对github仓库进行更新时，Github Pages服务都会将上述页面转换成静态的HTML页面。

具体步骤：

  1. Fork该仓库.
  2. 在仓库Setting中修改仓库名称为[your_name].github.io，该名称将会成为你个人主页的网址。
  3. 设置侧边内容、生成content&metadata。
    • Site-wide configuration : 主要的配置信息及侧边信息在_config.yml中，top menu的配置在_data/navigation.yml中，对于不需要的选项可以删除。
    • Create contenet & metadata : 网站内容都存储在对应文件夹(如_publications, posts等)下的markdown文件中，这些markdown文件的顶部是yaml格式来定义结构化内容。
    • 根据该主题的Guide，可以根据关键文件的位置进行内容修改，直接修改md文件即可不必安装Jekyll。很多教程中的第一步就是安装Jekyll，其实没有必要安装该框架，因为Github提供了Jekyll的服务环境，会自动利用Jekell生成站点，用户只需要修改关注md文件即可。
    • 关键文件位置及路径
      • Basic config options: _config.yml
      • Top navigation bar config: _data/navigation.yml
      • Single pages: _pages/
      • Collections of pages are .md or .html files in:
        • _publications/
        • _portfolio/
        • _posts/
        • _teaching/
        • _talks/
      • Footer: _includes/footer.html
      • Static files (like PDFs): /files/
      • Profile image (can set in _config.yml): images/profile.png
  4. 上传文件（pdf, zip等文件）至files/directory下，会出现在https://[your name].github.io下。
  5. 在设置页面修改完善”GitHub pages”页面

目前搭建好的个人主页可以直接访问[your_name].github.io，如我的个人主页superlj666.github.io。但如果想要使用独有的个性域名还需要额外步骤。

3. 域名购买、备案

不同域名服务商直接域名转入转出较为麻烦，所以最好是购买云服务器和域名使用同一家云服务商。另外，.cn等域名需要备案，使用阿里云、腾讯云可以很方便地进行备案。最终我选用了腾讯云。

  1. 域名购买 可以先使用万网（阿里云）、dnspod（腾讯云）、Godaddy（国外受监管少）等域名服务商查询想要的域名，不管个人还是企业能买到.com肯定是最好的，而.cn等后缀域名需要备案而且管理，但想要的.com往往已经被占用。 比如我使用lijian作为前缀查询，最终想要的就剩lijian.ac.cn，该域名常用于科研机构，而且和我所在的研究所、科学院的后缀一样，所以最终购买了该域名。 购买时可以先买一年的，注册绑定coding，可以领券腾讯云100元代金券，使用该优惠券再续费几年。同时，域名实名认证后腾讯云送的代金券中有续费可以使用的打折券，再续费一波。最终，我的lijian.ac.cn域名总共花费100元，有效期变为了6年。
  2. 域名备案
    购买域名后，尽早进行实名认证，认证之后再能进行备案。备案成功后的有效期是无限的，但存在不定期抽查。 进行域名备案，必须在大陆有云服务器或者主机，域名接入商会帮助进行备案。
    比如，我的域名、云服务器都是在腾讯云上购买的，腾讯云会帮我完成备案（审核、幕布邮寄等），阿里云也类似。

4. 域名邮箱

有了域名、云服务器之后，想要使用域名邮箱，比如我使用的me@lijian.ac.cn。可以自己搭建邮箱服务器，但这样费时费力而且垃圾邮件过滤、分类等都太麻烦了。还可以使用企业云邮箱，阿里、网易、腾讯等有提供，这里我也是使用的腾讯的企业邮箱，优点是账号上限为50个以及邮件有微信推送。

使用域名邮箱会在域名解析中添加两条@MX解析。

5. 域名网站

由于我的域名lijian.ac.cn使用企业云邮箱来做个人邮箱，所以会使用@MX解析，然后就遇到了@MX与@CNAME不能共存的问题。查了很多资料，发现这个问题是个历史遗留问题不好解决。比较好的方案是

  • 在云服务器上搭建Jekyll环境并自动抓取Github对应仓库的更新(Web Hook)，然后自动编译、发布(Jekyll-Hook)。详见Jekyll 同时使用 Github Page 和阿里云。该方案比较麻烦，需要自己搭建环境而且还需要额外的云服务器。
  • 不使用裸域lijian.ac.cn而是使用www.lijian.ac.cn。该方案不可行，因为Jekyll默认是CNAME到裸域的，而且必须加www不符合使用习惯。

之后发现了github怎么绑定自己的域名？ - 严晟嘉的回答 - 知乎，ping superlj666.github.io得到ip地址，然后使用@A记录从而避免@CNAME，目前Github支持自定义域名的HTTPS请求（需配置，详见Custom domains on GitHub Pages gain support for HTTPS，将assets中的http改为https）。

具体步骤如下

  1. 修改根目录下CNAME文件内容为lijian.ac.cn，注意此处无www、无https。
  2. 在Setting中开启Enforce https
  3. 到域名服务商处，添加如下域名解析：
    • 主机记录为www，记录类型为CNAME，记录值为superlj666.github.io
    • 主机记录为@，记录类型为A，记录值可为如下四个（可以添加多条）
      • 185.199.108.153
      • 185.199.109.153
      • 185.199.110.153
      • 185.199.111.153

6. SEO

hexo高阶教程：教你怎么让你的hexo博客在搜索引擎中排第一
让Google搜索到用Jekyll搭建在Github Pages上的博客

个人主页搭建好后，由于存在较少的链接指向，造成搜索引擎的爬虫无法抓到。可以在Google或者Baidu中搜索site:https://maxwellyue.github.io/ 查看收录结果。如果没有则需要在Google Webmasters或百度站长进行网站注册

  • 百度站长
    1. 验证网站所有权，点击添加网站，百度站长支持三种验证方式
      • 文件验证
      • html验证
      • cname验证

      最简单是cname，我采用这种方式。

    2. 添加Sitemap
      使用Github Pages默认使用Jekyll –safe模式，所以无法使用插件，从而生成sitemap.xml。使用sitemap生成工具，输入网站URL生成即可xml并将其放在根目录下。使用个性化域名生成的
    3. 在百度站长链接提交中sitemap中提交https://www.lijian.ac.cn/sitemap.xml，然后就是等待收录了。
  • Google Webmaster
    1. 验证网站所有权，点击Search Console添加网站，下载HTML文件并上传至网站首页后点击验证。
    2. 添加Sitemap
      使用Github Pages默认使用Jekyll –safe模式，所以无法使用插件，从而生成sitemap.xml。使用sitemap生成工具，输入网站URL生成即可xml并将其放在根目录下。
    3. 点击”网站URL”-“抓取”-“站点地图”，测试、提交sitemap.xml即可。

7. 个人网站的使用中遇到的问题

  • 开启https后显示不正确的问题
    解决：将assets文件夹下所有http://改为https://
  • https://lijian.ac.cn可以访问但http://lijian.ac.cn无法访问
    解决：发邮件询问Github工作人员得知，commit后需要一定时间进行build，使用它们的CND传播也需要一定时间，耐心等待即可。如果仍无法解决，可以尝试将CNAME值清空，将域名解析中设置的CNAME、A记录暂停，build一遍网站，此时https://lijian.ac.cn是访问不了的；再重新填写CNAME，开启域名解析，build网站；上述操作类似于重启。
  • commit后网站没有更新
    解决：首先要到Github commits查看提交是否成功了，如果失败会有原因提示；如果成功，清缓存刷新网站。
  • Top bar的修改
    解决：在_data/navigation.yml中进行修改，并在_pages文件夹下添加文件，注意link要对应。
  • Markdown语法无错误，但代码段高亮报错
    解决：这是因为Jekyll将所有的[//]: # (){{ text }}、{% text %} [//]: # ()等视为Liquid标签。使用如下方式即可解决
    [//]: # ()
your code here
[//]: # ()
  • 代码高亮后字体太小 解决：在_sass/_syntax.scss中进行修改，将font-size: $type-size-7改为14pt，如下所示
    .highlight {
  margin: 0;
  padding: 1em;
  font-family: $monospace;
  font-size: 14pt;
  line-height: 1.8;
}

8. 总结

通过上面的步骤，我可以得到

  • 访问：可以通过superlj666.github.io或lijian.ac.cn访问个人主页。
  • 编辑：使用Markdown、yml编辑想要的效果，然后使用push命令发布到Github上。
  • 部署：Github Pages自动编译部署，无需本地安装Jekyll。
  • 个性化邮箱：很好记的邮箱地址me@lijian.ac.cn。

You May Also Enjoy