利用Hugo和Github Pages免费创建并永久托管网站

概述

Hugo可以让你轻松生成静态网站,比如个人博客、API文档、公司主页等,你只需要提供markdown格式的文本,它就能帮你渲染成各种你想要的样式,只需要安装想要的主题,写好对应的markdown内容,就能快速编译出一个静态网站。

安装hugo

参考官方:http://gohugo.io/getting-started/installing/

创建网站

首先初始化你的网站,假如 mysite 是存放网站相关文件的目录:

hugo new site mysite

这会在当前路径创建一个 mysite 目录,进入该路径:

cd mysite

目录如下:

 ▸ archetypes/
 ▸ content/
 ▸ layouts/
 ▸ static/
 ▸ themes/
   config.toml

config.toml 是网站的配置文件,包含一些基本配置和主题特有的配置。 这几个文件夹的作用分别是:

  • archetypes:包括内容类型,在创建新内容时自动生成内容的配置
  • content:包括网站内容,全部使用markdown格式
  • layouts:包括了网站的模版,决定内容如何呈现
  • static:包括了css, js, fonts, media等,决定网站的外观
  • themes:用于存放主题

在创建页面之前需要安装想要的主题,官方有收集一些:https://themes.gohugo.io/

在这里我用我博客的主题xhugo作示例,下载到themes目录:

git clone https://github.com/imroc/xhugo.git themes/xhugo

在配置文件config.toml里加一行,配置本网站的主题:

theme = "xhugo"

注: config.toml 中配置的主题名字应和主题目录名称一致

新建页面:

hugo new posts/hello.md

此时会在 content 路径下创建文件,由于参数中还带有 posts 路径,所以最终创建的文件路径是 content/posts/hello.md, 每次创建的文件都根据 archetypes/default.md 生成的,包含一些页面的特定配置,比如标题、分类等,不同的主题还有自己支持的一些配置,需要看主题的说明。

效果预览

写好 mardown 之后可以本地预览:

hugo server

在浏览器打开 http://localhost:1313 就能看到效果,并且改内容页面也能实时自动更新。 注: markdown 用什么编写就取决于你自己了,我自己有时用vim,有时用 vscode(装 markdown 的插件)

生成静态页面

在生成之前先确定你想将此网站发布在哪儿,在 config.toml 里面配置 baseURL 为访问此网站的基本URL路径:

baseURL = "https://imroc.io/"

然后

hugo

对,你没看错,直接执行 hugo 就可以了,它编译并生成网站所需的静态页面和文件,输出到当前目录的 public 目录下,当然你也可以改变输出目的地,如:

hugo -d docs

你可以将生成的目录放到 nginx 或 tomcat 等服务器下对外提供服务,不过这需要自己有服务器,接下来我教大家如何利用 Github Pages 来做到永久免费。

Github Pages

Github Pages 是 Github 推出的一项功能,可以免费托管静态网站,将你的静态文件放在仓库里,然后在仓库的 Settings 里面,翻到下面的 GitHub Pages 部分,可以将此仓库设置为你的静态网站文件的存放仓库。

其实 Github Pages 仓库分为两种。

  • 一种是主仓库,它里面存放的文件可以直接映射到你网站的根路径,而且只能有一个仓库名固定为:<github账号名>.github.io,比如我的 github 账号为 imroc,那么我的 Github Pages 主仓库就为 imroc.github.io,这个仓库的名字其实也就是访问你网站的域名。
  • 其它的仓库只能映射到网站的子路径,子路径名称和仓库名一致,比如我新建一个 static 仓库并设置为 Github Pages 仓库,那么我可以通过 imroc.github.io/static/ 访问到里面的页面和文件

设置 Github Pages

静态文件存放位置有三种:

  • master 分支
  • master 分支下 docs 目录
  • gh-pages 分支(前提是这个分支存在才会显示)

注: Github Pages 主仓库除外,必须是 master 分支。

一般都会先新建第一种 Github Pages 主仓库作为网站主要托管,根据你的账号名创建仓库,如: imroc.github.io, 提交静态文件后在仓库的 Settings 里面,翻到下面的 Github Pages 部分,根据自己需要设置 Github Pages 文件存放位置:

源文件与编译结果在同一仓库

如果你想要将你网站的 hugo 源文件和编译后的静态文件目录放在一个仓库,那可以选择 master 下的 docs 目录作为 Github Pages 目录,编译的时候执行:

hugo -d docs

建议写个脚本,每次更新内容执行下脚本网站就可以更新,如(deploy.sh):

#! /bin/bash

set -eux 

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

msg="rebuilding site `date`"

if [ $# -eq 1  ]
    then msg="$1"
fi

# Build the project. 
hugo -d docs

# Add changes to git.
git add .

# Commit changes.

git commit -m "$msg"

# Push source and build repos.
git push origin master

这样,每次运行:

./deploy.sh

./deploy.sh "本次更新描述"

就可以更新网站了。

另外,别忘了给脚本可执行权限哦

chmod +x deploy.sh

源文件与编译结果在不同仓库

新建一个仓库存放源文件(此仓库不需要设置 Github Pages),如 blog 仓库,编译结果放在主仓库里,如 imroc.github.io 仓库。

进入hugo创建的网站目录并设置 git 的远程地址:

cd mysite
git remote add origin https://github.com/imroc/blog.git

Github Pages 的仓库下载到当前目录并命名 public

git clone https://github.com/imroc/imroc.github.io.git
mv imroc.github.io public

新增脚本 (deploy.sh):

#! /bin/bash

set -eux 

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

msg="rebuilding site `date`"
if [ $# -eq 1  ]
    then msg="$1"
fi

# Build the project. 
hugo # if using a theme, replace by `hugo -t <yourtheme>`

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back
cd ..

git add .
git commit -m "$msg"
git push origin master

这样执行脚本也可以更新网站,只不过分成了两个仓库,我也是用的这种做法,因为 Github Pages 主仓库只允许 master 分支作为网站内容,所以源文件就存在了另一个仓库 blog

自定义域名

github 给我们提供了免费域名,但是我们还可以绑定自己的域名。

很简单,在仓库的 Settings 里的 Github Pages 部分,有个 Custom domain 的设置,将其设置为你需要绑定的域名(它会新建一个 commit,就是创建一个 CNAME 文件,内容是你填的域名),你也可以自己手动创建一个 CNAME 文件,效果是一样的。

注: 由于自定义域名需要仓库里面有个 CNAME 文件,用上面的第二种方式(源文件与编译结果在不同仓库)管理的话,每次编译会覆盖 public 目录下除 .git 目录的文件,CNAME 文件可能就不在了,没关系,在源文件的 static 目录下放入 CNAME 文件即可保证每次编译的结果里面都会有 CNAME 文件。

下一步就是登录你的域名提供商的后台管理,设置DNS解析:

绑定根域名

如果你想要绑定自己域名的根域名(如:imroc.io),新建两个A记录,分别指向下面两个IP:

192.30.252.153 192.30.252.154

绑定二级域名

如果你想要绑定自己域名的二级域名(如:blog.imroc.io),新建一个 CNAME 记录,值为你的 github 域名,如: imroc.github.io

自定义域名开启https

如果绑定了自定义域名,github pages 原则上是不能启用https的,但是可以借助 cloudflare

  • cloudflare上注册并获得 nameserver
  • 在域名注册机构的后台管理页面将 nameservers 设置为 cloudflare 上的(即让 cloudflare 来管理 dns)
  • 确保 Crypto-SSLFull
  • 配置 Page Rules:加入一条规则,举例: http://imroc.io/* 设置为 Always Use HTTPS

最后等待一段时间生效

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏醉生梦死

centos7服务器主网卡绑定多ip实践演示

2.1K8
来自专栏源哥的专栏

把JSP放到WEB-INF后以保护JSP源代码

    本人在看《J2EE核心模式》(“Core J2ee Patterns”,刘天北、熊节译),里面提到了一种实现资源保护的方法,那就是把那些限制访问的资源(...

1083
来自专栏lgp20151222

consul怎么在windows下安装

1.去官网下载:https://www.consul.io/downloads.html 2.解压:

1944
来自专栏xingoo, 一个梦想做发明家的程序员

linux虚拟机与winodows共享文件夹----linux安装VMware tools

虚拟机里面想要获取原来本机 系统的文件,十分麻烦。为了实现原系统与虚拟机的共享文件夹,可以通过安装vmware tools达到共享目的。 1 安装vmware ...

2379
来自专栏冷冷

tomcat不能运行或共存多个项目

我在Tomcat下部署了两个项目,但是一个可以运行,另一个不可以,第一感觉是内存问题,给tomcat多分配了内存.但是没有作用. 原因是少了webAppRoot...

2099
来自专栏白驹过隙

Jenkins - 持续集成环境搭建

2275
来自专栏闵开慧

hadoop数据库操作解析及注意事项

1 从mysql读数据到hdfs:     mapreduce读数据库数据到hdfs使用map读取,连接数和map数对应,读的时候会锁表读取全量数据,此时,其它...

5497
来自专栏lgp20151222

Tomcat出现validateJarFile-jar not loaded问题

validateJarFile(...\WEB-INF\lib\servlet-api.jar)-jar not loaded. See Servlet Spe...

1381
来自专栏玄魂工作室

Hacker基础之Linux篇:基础Linux命令二

1. mv mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files)。 是Linux系统下常用的命令,经常用来备份文...

36710
来自专栏白驹过隙

Jenkins - 持续集成环境搭建

38210

扫码关注云+社区

领取腾讯云代金券