使用Hugo搭建个人博客网站

前言

两年前用Hexo搭建博客,但是因为各种配置问题没有继续跟进,之后就一直在写的博客。恰逢看到新的博客生成工具Hugo,所以重新搭建了一个个人博客网站,通过Github Pages,域名重定向来实现线上访问。本文介绍的就是如何使用Hugo搭建个人博客网站的过程。实际效果可以访问我的博客。

Hugo简介

不同与Hexo是用JavaScript实现的,Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。从我的个人体验来讲,Hugo比Hexo速度更快,而且不用依赖一大堆东西,一个二进制文件就可以搞定。

The world’s fastest framework for building websites. Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

这是Hugo的主页对自己的介绍,看这嚣张的简介,“全球最快的网站建设框架”,就不禁想让人来体验一把。

那么就开始吧!

Hugo快速开始

Hugo的首页有一个显眼的按钮【Quick Start】,点击它,按步骤完成即可

使用Hugo搭建个人博客网站_第1张图片
Hugo首页

Hugo安装

Mac

brew install hugo
hugo version

Windows

去Hugo releases页面下载hugo_xxx_Windows-64bit.zip 将它解压到一个安全的目录,然后把这个目录添加到环境变量PATH中,重启终端,运行hugo version,正确展示了版本号就说明安装成功。

快速搭建博客

可以进入Hugo首页,点击Quick Start快速开始,从Step 2开始抄代码,直到Step 7结束。(Step 1是安装Hugo,我们在上文已经介绍了。)

也可以根据接下来的步骤依次执行:

  1. 创建一个新的项目(quickstart 是项目名称,可以改成你想要的名字)
    hugo new site quickstart
    
  2. 添加一个主题(这里会安装一个默认主题ananke)
    cd quickstart
    git init
    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
    
    echo 'theme = "ananke"' >> config.toml
    
  3. 创建一个新的博客
    hugo new posts/my-first-post.md
    
    注意:博客文件开头的 draft: false要改成true,否则改博客不会被生成到public目录中。
  4. 开启 Hugo Serve,用于本地预览
    hugo server -D
    
  5. 定制主题,如果对步骤2安装的默认主题不满意,可以自己选择一个主题进行替换
    • 重复步骤2,把你想要替换的主题GitHub路径替换一下就好,然后在配置文件config.toml里修改下面的配置
    baseURL = "https://example.org/"
    languageCode = "en-us"
    title = "My New Hugo Site"
    theme = "ananke"
    
    • baseURL 改成你的博客主页地址
    • languageCode 如果是中文博客,可以改成zh-CN
    • title 即博客名称
    • theme 这里是重点,把theme的值改成你替换的主题的名称,然后主题就生效啦。
  6. 构建静态页面
    hugo -D
    
    这个命令执行以后会生成一个./public的目录,将这个目录上传到GitHub,创建一个名为dreamqyq.github.io的项目(dreamqyq 这里替换成你的GitHub账号名),然后使用GitHub Pages就可以让别人来看你的博客啦。

Hugo常用命令

  • hugo 构建静态文件
  • hugo server -D 本地预览
  • hugo new blogName.md 生成一个新的博客

主题

我的个人博客网站的主题使用了maupassant (我fork了原项目并做了一点修改,支持了博客目录显示二级目录)主题,在这个主题的Github主页README中有详细的配置方法,这里就不再赘述。如果喜欢的话可以参考教程进行配置。

遇到的问题

在配置教程的时候遇到了一个问题,上文中提到的配置bashURL应该是个人博客网站的地址,由于我做了Gihubub Pages域名转发,使用了我自己的域名 https://enochqin.xyz(域名已弃用,目前的博客直接使用的GitHub Pages)。在最开始配置的时候,写成了https://www.enochqin.xyz,导致博客的很多功能各种出错,后来才意识到,我的域名没有做www的映射,导致其实https://www.enochqin.xyz这个网址是不能访问的。

没有www和带www的域名是被看做两个不同的域名的。一般我们都会将两个域名设置指向相同的一个网站。但是实际上带www的和不带www的域名完全可以设置指向两个不同的服务器。这样你访问带www和不带www的地址,看到的是两个不同的网站了。

(完)

你可能感兴趣的:(使用Hugo搭建个人博客网站)