Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >利用Hugo和Github Pages免费创建并永久托管网站

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

作者头像
imroc
发布于 2018-09-03 08:10:06
发布于 2018-09-03 08:10:06
7.3K00
代码可运行
举报
运行总次数:0
代码可运行

概述

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

安装hugo

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

创建网站

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
hugo new site mysite

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cd mysite

目录如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 ▸ 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目录:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
git clone https://github.com/imroc/xhugo.git themes/xhugo

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
theme = "xhugo"

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

新建页面:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
hugo new posts/hello.md

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

效果预览

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
hugo server

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

生成静态页面

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
baseURL = "https://imroc.io/"

然后

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
hugo

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 目录,编译的时候执行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
hugo -d docs

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#! /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

这样,每次运行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
./deploy.sh

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
./deploy.sh "本次更新描述"

就可以更新网站了。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
chmod +x deploy.sh

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cd mysite
git remote add origin https://github.com/imroc/blog.git

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
git clone https://github.com/imroc/imroc.github.io.git
mv imroc.github.io public

新增脚本 (deploy.sh):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#! /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

最后等待一段时间生效

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Hugo + GitHub Pages 搭建自己的网站
很早之前,我使用 WordPress 搭建了个人博客:http://blog.studygolang.com,毕竟那时候 WordPress 是首选。现如今,大家似乎更喜欢静态博客,各种语言的静态博客生成器轮子不断,比如 Go 语言的 Hugo 就是一个静态博客生成器。我个人认为,静态博客生成器流行的一个很大原因,是 Markdown 的流行,开发人员习惯了使用 Markdown 进行写作。
lucifer210
2020/12/15
1.6K0
Hugo + GitHub Pages 搭建自己的网站
使用 Github Pages 和 Hugo 搭建个人博客教程
十一假期宅家无事,发现自己过去写了很多文章,却没有一个自己的博客,系统得管理自己的文章,所以准备将自己过去以及未来的文章都放到博客,以饷读者。另一方面,经过对 Serverless 博客、TCB 建站、虚拟机建站等一系列建站方式对比后,个人认为基于 Github Pages 最适合搭建个人技术博客,最重要的当然是免费,其次网上教程众多,可以快速建站,第三则是所有的博客直接托管在 github,也更符合个人习惯,最后则是自建个人博客可玩性和可扩展性好。
绯浅yousa
2021/01/05
7.6K0
利用 Github Pages 和 Hugo 快速搭建免费的个人网站
个人网站,主要是用来记录属于个人的东西,将内容以最直接方式呈现给大家,其中文字、图片占比最多,基本不存在其它用户的注册场景。
xcbeyond
2021/12/27
6.1K5
利用 Github Pages 和 Hugo 快速搭建免费的个人网站
折腾Hugo | GitHub Pages | Github Actions自动构建发布免费个人网站
之前也折腾过个人博客,从大学时候玩的 Wordpress、Ghost,最近又开始折腾博客。由于我个人是比较喜欢通过Github来做博客系统的,对比了目前市面上比较主流的博客系统,比如Hexo、Hugo, 顺便推荐一下国内比较活跃的 Java 开源博客系统 Halo,更多可移步:https://github.com/halo-dev/halo
Jared.Tan
2020/06/19
3.4K1
折腾Hugo | GitHub Pages | Github Actions自动构建发布免费个人网站
K哥用Github做了个免费永久博客,超详细过程!
我们需要先下载hugo,这里给大家地址,大家找到自己电脑相对应的版本进行下载就行了。
Python进击者
2021/07/09
9300
简单使用 Hugo 博客
Hugo是一个用 Go语言 编写的静态网站生成器,可以快速地生成高效、安全和易于管理的静态网站。Hugo具有速度快、可定制性强、易于使用等特点,被广泛应用于个人博客、公司网站、文档站点等领域。
阿兵云原生
2023/10/19
3330
简单使用 Hugo 博客
Hugo系列(1) - 简单搭建教程与远程部署
使用Hexo搭建个人博客也有两年多时间了,当文章数量达到上百篇之后,开始发现Hexo生成文章的效率越来越慢,直到每次生成都需要至少五分钟的时间。我发现生成效率和文章涉及到的分类和标签有很大关系,由于文章数量多,每篇文章又都关联了若干个分类和标签,再加上我使用了压缩样式的插件,最终导致极其低下的生成效率。
雨临Lewis
2022/01/12
2K0
免费创建个人静态网站最佳实践:hugo+github+netlify
关于搭建一个博客或个人网站的好处不用我多说,但创建网站的难度可能会让人望而却步。本人从网络上获得过很多帮助,学到很多。很早就萌发了自己建网站并分享知识的想法,但是又不想在简书这类的网站上写作。原谅我是个拖延控,有时间就写一点,很可能一篇文章写好久,也不喜欢在网上编辑。此外,知识需要积累形成框架,由于平时我所有的笔记都放在有道云笔记中,复制粘贴到简书有时候格式不对,又不想进行二次编辑。最重要的是不够Geek(装逼)。
风不止
2020/05/26
4.6K0
个人博客从 Hexo 迁移至 Hugo
那 hugo 基于编译语言 GO 构建,对于静态页面的构建肯定是碾压 hexo 的存在,其官方标语也是很直白 "The world’s fastest framework for building websites", 作为先后使用过 hexo 和 hugo 的我来说,这确实名副其实。
Cell
2022/02/25
9350
[golang][hugo]使用Hugo搭建静态站点
hugo下载地址:https://github.com/gohugoio/hugo
landv
2019/11/30
1.6K0
Hugo搭建博客(一)— 基本设置
我在windows和ubuntu下安装过hugo,简要介绍下我的安装过程,其他方式可以参考官方文档 。
程序员酷森
2020/10/19
3.2K0
Hugo搭建博客(一)— 基本设置
免费的个人博客系统搭建及部署解决方案(Hugo + GitHub Pages + Cusdis)
Pseudoyu 是我的个人博客网站,最早使用 WordPress 搭建在自己的 Vultr vps 上,因为网络访问比较慢所以迁移到了腾讯云服务器上并且进行备案,虽然访问速度有提升,但是发布博客的流程很繁琐,服务器的维护长期也是一笔不小的开支。
pseudoyu
2023/04/11
2.9K1
免费的个人博客系统搭建及部署解决方案(Hugo + GitHub Pages + Cusdis)
用 Hugo 30 分钟搭建静态博客
你是不是强烈地想搭建博客来将自己对软件框架等的探索学习成果分享呢?你是不是面对缺乏指导文档而一团糟的项目就有一种想去改变它的冲动呢?或者换个角度,你是不是十分期待能创建一个属于自己的个人博客网站呢?
星哥玩云
2022/07/19
9820
用 Hugo 30 分钟搭建静态博客
Hugo搭建博客(二)— Hugo+Github Pages搭建博客
使用Hugo已经把博客搭建好了,那应该部署到哪里呢?可以使用VPS、云服务器等,我使用的是Github Pages,免费而且也很好用!
程序员酷森
2020/10/19
2.2K0
Hugo搭建博客(二)— Hugo+Github Pages搭建博客
Hugo 快速搭静态网站
Hugo 是Go语言实现的一款静态网站生成器。它简单、易用、高效、易扩展、快速部署。相比较其他静态网站生成器,它的优点有这几点:
不安分的猿人
2020/04/07
1.7K0
Hugo 快速搭静态网站
Hugo + GitHub Action,搭建你的博客自动发布系统
在之前的一篇《免费的个人博客系统搭建及部署解决方案(Hugo + GitHub Pages + Cusdis)》中,我提到了自己通过 Hugo 这个静态网站生成器来真正搭建我的个人博客,并在 Hugo 开源社区中 hugo-theme-den 这个主题基础上进行了一些个人定制化改造和配置,满足了自己的需求。
pseudoyu
2023/04/11
1.8K0
Hugo + GitHub Action,搭建你的博客自动发布系统
hugo github action|vecel部署后文章更新时间异常修复
文章更新时间,本地和远程部署的不同,远程通过github action|vecel部署,远程部署后的时间不对,会把所有文章时间都更为最新。
六月河
2022/09/06
1.7K0
hugo github action|vecel部署后文章更新时间异常修复
利用 GitHub 从零开始搭建一个博客
趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了。这里写一篇文章顺手记录了下来。不过这篇原创我发在了 NightTeam 上面了,这边我就作为转载了。
崔庆才
2019/09/30
1K0
利用 GitHub 从零开始搭建一个博客
Hugo + Coding 搭建个人博客
记得在 Coding 新建网站的时候选择自动部署,并设置代码推送 master 分支自动构建。
贺biubiu
2020/05/07
1.4K0
利用 Travis 自动部署博客
集成 主要是用来将多个用户的开发模块构建成一个可运行版本;而 持续集成 则是在集成之上,尽量将每一次提交都进行一次构建,这个个过程就是 持续集成 。
zucchiniy
2019/10/31
1K0
相关推荐
Hugo + GitHub Pages 搭建自己的网站
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档