首页 > Web开发 > 详细

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

时间:2019-11-22 11:31:05      阅读:101      评论:0      收藏:0      [点我收藏+]

概述

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
技术分享图片

最后等待一段时间生效

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

原文:https://www.cnblogs.com/ECJTUACM-1435867846/p/11910381.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!