饥人谷技术博客powered by hugo 框架

使用Hugo搭建个人博客网站

2020-04-14  本文已影响0人  EnochQin

前言

两年前用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首页

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常用命令

主题

我的个人博客网站的主题使用了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的地址,看到的是两个不同的网站了。

(完)

上一篇下一篇

猜你喜欢

热点阅读