个人网站搭建

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值清空,将域名解析中设置的CNAMEA记录暂停,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.iolijian.ac.cn访问个人主页。
  • 编辑:使用Markdown、yml编辑想要的效果,然后使用push命令发布到Github上。
  • 部署:Github Pages自动编译部署,无需本地安装Jekyll。
  • 个性化邮箱:很好记的邮箱地址me@lijian.ac.cn