专栏首页云原生知识宇宙利用Hugo和Github Pages免费创建并永久托管网站

利用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 条评论
登录 后参与评论

相关文章

  • Kubernetes 问题定位技巧:容器内抓包

    在使用 kubernetes 跑应用的时候,可能会遇到一些网络问题,比较常见的是服务端无响应(超时)或回包内容不正常,如果没找出各种配置上有问题,这时我们需要确...

    imroc
  • Kubernetes 问题排查: Pod 状态一直 Terminating

    怀疑是17版本dockerd的BUG。可通过 kubectl -n cn-staging delete pod apigateway-6dc48bf8b6-cl...

    imroc
  • Kubernetes 疑难杂症排查分享:神秘的溢出与丢包

    图片下载走的 k8s ingress,这个 ingress 路径对应后端 service 是一个代理静态图片文件的 nginx deployment,这个 de...

    imroc
  • python:pickle模块,持久存储

    pickle模块,他是用来保存和加载python数据对象的(是python的专有格式文件,其他语言无法识别),数据用dump保存到文件,用load加载(第一次看...

    py3study
  • Git_错误_02_error: src refspec master does not match any

    现象:在一个目录下初始化仓库之后,就开始push到github,结果出现了这个错误。

    shirayner
  • “不可不学是编程,不可不用是git” | github篇

    从Get一个github的账号开始,这里按照提示,走一走流程就好了,相信聪明的你可以的。

    LogicPanda
  • Git基础知识 —— 获取Git仓库

    官方提供了两种获取Git仓库的方法,第一种是在本地现有项目目录下导入所有文件到Git中,第二种就是从Git仓库中clone项目到本地

    小菠萝测试笔记
  • git 命令行上传项目

    小编第一次成功上传的项目地址: https://github.com/xiguazaitortoise/xor-matlab/blob/master/p_or....

    瓜大三哥
  • 电商网站开发记录(一) 项目初始化

    在deployment里引入artifact,第一次建的时候发现没有artifact,可能是module之类的没有初始化好,当时也没有吧maven的依赖impo...

    Dar_Alpha
  • Git中的远程操作

    Git有很多优势,其中之一就是远程操作非常简便。本文详细介绍5个Git命令,它们的概念和用法,理解了这些内容,你就会完全掌握Git远程操作。

    刘亦枫

扫码关注云+社区

领取腾讯云代金券