使用 Hugo 搭建个人博客

今天把之前写过的一些文档整理了下,准备把他们整理出来,搭建一个博客,把文档放上去,一来下次给别人文档的时候不用在本地找来找去发过去,麻烦,二来可以把一些有用的文档给分享到外部,希望能够给他人提供点帮助

之前也有过搭建个人博客的想法,但是用了几个开源工具,比如wordpress,还有一些其他的工具(太久了忘了名字),但是总体来说来不尽如人意,总会有各种各样让我难以接受的问题,所以尝试了下就放弃了,后来某天看到有人推荐Hugo,看了下感觉还可以,就用这两天时间折腾了下,以下为本次折腾的教程,内容包括了使用hugo搭建个人博客,然后使用 github pages / gitee pages 部署,能够从公网访问到,和申请域名,绑定域名,解析,以及收录到百度,谷歌的搜索引擎

  1. 安装hugo

    hugo的项目开源地址是:https://github.com/gohugoio/hugo

    可以自己去拉最新的代码编译安装,具体参考项目的 README

    由于我使用的是Arch,官方仓库已经有打包的包,直接使用Arch的包安装工具安装即可

    1
    
    sudo pacman -S hugo
    

    Debian sid 的仓库也是有的,如果你使用的是Debian或者是基于Debian的发行版,如kaliubuntulinux mint等,可以直接使用apt 包管理工具安装

    1
    
    sudo apt install hugo
    
  2. 生成站点

    在安装hugo之后,使用hugo new site sitepath生成站点

    (将 sitepath 换成你自己想生成站点的路径)

    执行生成站点的命令后,将会在你指定的路径下生成如下的目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    
    ├── archetypes
    │   └── default.md	#生成新文章的默认模板
    ├── config.toml	#博客站点的配置文件
    ├── content		#放博客文章的目录
    ├── data		#存放 hugo 处理的数据
    ├── layouts		#网站布局文件
    ├── static		#存放静态文件
    └── themes		#用来放置博客的主题
    
  3. 下载主题

    主题其实是很重要的一环,因为部分主题带了很多特性和配置文件来供你使用,你不用再手动书写配置,直接在主题附带的配置文件里 启用/禁用 特性和功能,找到一个好的主题能够节省你很多的时间

    这里我推荐 even 主题,GitHub 地址:https://github.com/olOwOlo/hugo-theme-even

    该主题非常强大,有很多特性,自带完善的配置文件,这里不过多介绍

    在站点根目录执行

    1
    
    $ git clone https://github.com/olOwOlo/hugo-theme-even themes/even
    

    该主题将会 clone 到 themes 目录下,该目录刚介绍了,是专门放置主题的

    在主题的 exampleSite 目录下有一个 config.toml 文件,将这个 config.toml 文件复制到你的站点目录下,根据自己的需求更改即可,(不熟悉的话可以先使用默认的,不需修改,网站部署后再慢慢折腾)

    然后将主题目录下的archetypesstatic 目录复制到站点目录下,覆盖站点的目录即可

    更多详细内容可以参考官方README:https://github.com/olOwOlo/hugo-theme-even/blob/master/README-zh.md

  4. 生成文章

    执行

    1
    
    hugo new post/first.md 
    

    将在 content/post 目录下生成first.md,之后你就可以编辑该文章

    (注意:该主题要求所有文章都必须要在 content/post 目录下)

    在你确定你的文章无问题之后,要把你生成的文章的的头信息的draft值改为false,否则文章在部署之后是不会显示出来的,如果你不想每次都要修改,你可以编辑archetypes/default.md,将draft的值改为false,以后生成的文档默认都可以显示出来了

  5. 本地部署

    在你编辑好文章之后,想在本地部署或者查看效果,可以执行

    1
    
    hugo server
    

    hugo服务就在本地部署完成了,默认是使用1313端口,你可以打开http://localhost:1313/查看你的网站

  6. 生成静态文件

    如果你已经在本地部署成功了,而且十分满意该博客,接下来你就会考虑将该博客部署到外网去,让所有人都可以访问到你的博客

    不要着急,在此之前呢,我们还需要将该网站变成一个静态文件,之后你就可以把你的静态文件部署到github pages / gitee pages

    直接执行

    1
    
    hugo
    

    即可生成静态页面,默认所有静态页面都会生成到 public 目录下,你用浏览器打开

    public目录下的index.html,即可查看生成的静态页面

    这里会有一个问题,你打开后会发现网页是没有任何渲染了,跟你刚刚看到的完全不一样,这是因为index.html的源码里写的jscss文件的路径是根目录的,而我们的js,css文件是放在public目录的,也就是index.html的同级目录,我们只需要手动修改index.html的加载js,css的相关行为相对路径即可

    修改css加载路径

    vim或其他编辑器打开index.html,然后搜索css,就是这一行,在src的路径前加一个.,代表当前路径,这样就能加载到了,网页就可以正常渲染了

    css

    修改js加载路径

    同上,搜索javascript,在src的路径前加一个.

    js

    之后再打开就可以正常渲染了,跟你之前看的效果一样

    (其实这个问题应该是可以在生成静态文件的时候使用参数指定路径的,但是我翻了下没看到,也懒的翻了,反正手动改一下也不麻烦)

    还有一个问题

    因为我们之后要部署到 github pages / gitee pages上,但是由于github pages只能选根目录或者 docs 目录作为博客的静态网页,我们目前默认是生成在public目录,我们改下配置,让静态文件生成到 docs目录

    只需要在config.toml里加一行

    1
    
    publishDir = "docs"
    

    即可,之后再执行hugo生成的静态的文件默认就生成在docs目录了,记得按照之前的步骤修改js,css加载路径

  7. 部署到github pages/gitee pages

    首先编辑confit.toml,把第一行的baseURL的地址改为https://username.gitee.io 或者 https://username.github.io(用你的用户名替换username),然后生成静态文件,改js,css加载路径

    在你确认无问题后,我们准备把博客推到github/gitee

    我们首先在github/gitee 新建一个仓库

    gitee

    gitee

    仓库名称,随便写一个,路径要跟你的用户名同名,这样可以使用username.gitee.io的地址访问你的博客,我因为已经创建过了,所以仓库名称和路径报错了,忽略

    选择开源,下面的使用Readmeissuepr模板的初始化仓库统统不要选(这一步是为了小白无脑按照下面流程操作,熟悉git操作的随意)

    之后创建即可

    github

    github

    github简单点,点击新建仓库,repo name格式为username.github.io,方便你之后使用用username.github.io地址访问你的博客,下面同理,不要选这些初始化,创建即可

    在博客根目录依次执行

    1
    2
    3
    4
    5
    
    git init
    git submodule add https://github.com/olOwOlo/hugo-theme-even themes/even
    git add .
    git commit -m "push my blog to github/gitee repo"
    git push --set-upstream you_repo_usl master #用你实际的仓库地址替换you_repo_usl
    

    git 的用法我就不解释了,git submodule 的简单解释可以看下这个文章:https://www.jianshu.com/p/f8a55b972972/

    如果你用的主题不是从github clone 下来的,可以忽略git submodule那条命令

    我们推到仓库后,开始配置 git pages

    gitee

    giteepages

    选择服务->gitee pages 选择你们的分支,部署目录写docs,然后使用https,确认即可,之后你就可以访问username.gitee.io来查看你的博客

    github

    githubpages

    在仓库中点settings->往下拉找到github pages同样的选择分支,目录,save即可,之后你就可以访问username.gitee.io来查看你的博客

    忽略我下面的custom domain写的,这个是下文用的,现在忽略即可

  8. 申请/购买,绑定,解析域名

    由于gitee目录普通用户已经不可以使用自定义域名功能,此篇只针对部署在github的读者

    上文我们成功把博客部署到了git pages,但是域名只能是username.github.io这样,你如果想使用自己的域名,就需要想申请一个域名,免费的也有,收费的也有,免费的域名后缀有限制,而且没有保障,随时可能被收回,收费域名也不贵,而且有保障,可以选择更多的后缀域名,如.com .cn .net,如果不介意付费,可以购买一个域名

    免费域名网站申请推荐:freenom

    收费域名推荐:阿里云腾讯云,或者其他,我只用过这两个,所以推荐,目前腾讯购买域名有活动,新用户 23 元 抢购.com域名一年使用权,可以去看看

    在你申请/购买了域名并且实名认证之后,,Github Pages上的静态博客也可以用github给的username.github.io正常访问了,通过以下三步就可以准备用自己的域名来访问博客了

    第一步

    首先是用ping命令找到存放你的github pages的主机的IP地址,在终端里面用命令ping username.github.io即可显示出来,

    如:185.199.110.153 就是我的github pagesIP

    1
    2
    3
    4
    
    ➜  ~ ping claystan.github.io
    64 比特,来自 185.199.110.153 (185.199.110.153): icmp_seq=1 ttl=53 时间=16.1 毫秒
    64 比特,来自 185.199.110.153 (185.199.110.153): icmp_seq=2 ttl=53 时间=16.3 毫秒
    64 比特,来自 185.199.110.153 (185.199.110.153): icmp_seq=3 ttl=53 时间=16.2 毫秒
    

    第二步

    在购买域名的提供商为域名添加解析。我是在腾讯云买的域名,因此我以腾讯云的为例。在域名控制台选择想要绑定的域名,并点击解析,然后添加如下两天记录:

    dns

    第三步

    Github中该项目选择settings 往下拉到 github pages,在 Custom domain 填上你申请的域名并保存:

    githubpages

    到这儿就已经完成了,等待几分钟后就可以使用自定义的域名访问github pages所提供的页面了。

  9. 收录到百度/谷歌/ 必应

    网站在没有提交搜索引擎收录之前,直接搜索你网站的内容虽然可以通过域名访问,但是直接搜索是搜不到的,只有提交搜索引擎之后,通过爬虫抓取你网站的东西,搜索引擎才能收录你的站点

    百度收录

    首先我们可以在百度输入 site:域名 来查看域名是否被搜索引擎收录,如下图所示,表示没有收录:

    baidu

    访问百度搜索资源平台官网,注册或者登陆百度账号,依次选择【用户中心】-【站点管理】,添加你的网站,在添加站点时会让你选择协议头(http 或者 https),如果选择 https,它会验证你的站点,我这里已经添加完成了

    baidu

    之后会让你验证网站所有权,提供三种验证方式:

    • 文件验证:下载给定的文件,将其放到本地根目录 ,然后部署上去完成验证
    • HTML 标签验证:给一个 meta 标签,放到index.html的 与 标签之间即可完成验证
    • CNAME 验证:在域名 DNS 添加一个 CNAME 记录即可完成验证

    第三种是最方便的,不过我使用这种方法失败了,我最终采用了第二种

    baidu

    index.html的 与 标签之间加入它给的头信息即可

    index.html

    然后重新推到github,等待5-10 分钟 github pages 自动更新部署,也可以直接访问你的域名,右键查看源码,确认刚加的元信息存在即可进行下一步

    baidu

    百度提供了自动提交和手动提交两种方式,其中自动提交又分为主动推送、自动推送和 sitemap 三种方式,以下是官方给出的解释:

    • 主动推送:最为快速的提交方式,推荐您将站点当天新产出链接立即通过此方式推送给百度,以保证新链接可以及时被百度收录
    • 自动推送:是轻量级链接提交组件,将自动推送的 JS 代码放置在站点每一个页面源代码中,当页面被访问时,页面链接会自动推送给百度,有利于新页面更快被百度发现
    • sitemap:您可以定期将网站链接放到sitemap中,然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap,对其中的链接进行处理,但收录速度慢于主动推送
    • 手动提交:如果您不想通过程序提交,那么可以采用此种方式,手动将链接提交给百度

    我使用的是sitemap,因为这个主题默认会给你生成sitmap,我就不想主动推送了,填写一下sitemap的地址即可

    默认的sitemap会生成在你的docs目录下(sitemap.xml 文件),你推送部署到了github pages之后,可以通过域名/sitemap.xml来访问你的sitemap

    sitemap

    确认可以访问后将该链接填写到百度收录的sitemap方式收录里,然后等待百度收录即可

    sitemap

    不过百度收录的特别慢… 大家需要慢慢等待,或者使用百度推荐的快速收录方法,我这里就不多介绍了, 官网说的非常清楚

    谷歌收录

    提交谷歌搜索引擎比较简单,而且快速,一般提交后第二天就收录了

    在提交之前,我们依然可以使用 site:域名 查看网站是否被收录

    接下来我们将网站提交谷歌搜索引擎搜索,进入谷歌站长平台,登录你的谷歌账号之后添加网站

    之后会让你验证网站所有权,有两种验证方式,分别是网域和网址前缀,区别也列了出来

    google

    我尝试了下网域验证,应该是我操作出现了问题,没有验证通过,所以我使用了第二种,网址前缀验证

    然后跟百度一样,选择HTML 标签验证,添加谷歌给的头信息,添加到index.htmlhead标签之中,然后推送到GitHub,等待更新部署,之后验证通过后,选择sitemap方式提交收录,跟百度一样,填写sitemap的地址,然后等待收录即可

    sitemap

    谷歌的收录很快,第二天就能看到了

    必应收录

    必应收录也是很简单,点击必应站长。先注册登录,必应收录有两种方式,一种使用刚刚谷歌导入过去,第二种是就是自己添加URL,我们之前在谷歌添加了,这时候直接导入即可

    bing

    然后等待收录即可

    bing