hugo+GitHub入门

在线预览

hugo简介

使用Go语言编写的静态站点生成器（注：官网文档 hugo中文网文档）

（本人是小白一个，请大家来指点提携）现在的博客主流框架有很多，比如hexo,docker也可用来搭建（动态）博客，简单来说一下hugo
因为本人是贫穷小白所以本文以介绍windows（为主）和linux

优缺点

• 优点

1. 体积小
2. 安装步骤简单，适合小白
3. 操作简单
4. 运行快

• 缺点

1. 作为一个博客框架，他的主题属实有点少
   当然可能还有其他的优缺点，请教万能的[百老师]，今天主要就是谈论一下如何安装hugo，基本配置以及远程发布到github

准备工作：

1.自行注册github账号，提前安装好git（自行百度，或者等待我下一篇git安装及基本操作，如果是windows以下操作最好在git bash中操作（git bash与linux操作相同），也可以自行下载chocolately，linux下直接命令行即可）
2.hugo下载（根据电脑系统选择下载方式）

• linux：命令行输入(brew install hugo）验证：hugo version
  windows下载方式下载Hugo-releases版本
• windows： hugo中文网上面有更系统的教程（可对比学习），自认为本人写的更加通俗易懂
  （最关键的一步：不要忘记添加hugo系统变量）

正式工作：

3.安装成功后创建一个站点

• hugo new site myblog
  

4.查看[ls]当前目录下就会生成一个myblog文件夹目录结构如下
让我们来一起看看文档的结构吧

5.下载主题（在下载主题时，下面会显示配置文件信息，英文较好的小伙伴可以尝试自行理解）

• hugo中文网 这个网页基本涵盖了hugo的所有内容（英文版是themes）中文版就是皮肤列表，点击进去自选心仪的主题下载
• 点进喜欢的页面之后，（找到Installation）cd 到themes目录下 复制 [举例:git clone https://github.com/syui/hugo-theme-air ]到bash中就会进行下载
• 下载后查看当前目录的子目录 可以把archetypes整体复制到你创建站点目录下覆盖掉原有的archetypes目录（上面提到过这个目录的作用）
• 将theme.toml同样复制到你创建站点目录下覆盖掉原有的config.toml(你需要对theme.toml进行重命名)这个就是博客的配置文件
• 如果不想修改也可以做下面的变更
  config.toml配置：（注意此时是yaml格式需要以- - -开始以- - -结束横杠间可以有空格也可以没有）
  
  配置的很简便，当然也可以添加配置

6.创建你的第一篇博文

• 进入到你的博文文件中，hugo new post/博文名.md 下面会弹出创建的目录，细心的小伙伴会发现，其实市创建在content的post目录下的markdown文件
  md文件即为markdown(根据模块内容可以适当创建其他类似post的模块)
  
• 上述操作可以通过toml 进行操作，也可以通过json进行操作，还有一种yaml
  

7.创建好博文后，需要进行发布

• 首先通过 hugo 初始化public
  
• 发布博客下面会有提示信息端口号为1313 hugo server -t 主题名 --buildDrafts 指定主题名进行渲染 buildDrafts强行渲染（如果像我一眼配置了在上面的config.toml配置文件中配置了theme）这里就只需要hugoserver启动即可（如下显示即为开启成功，可以清晰的看到端口为1313访问即可）
  

8.到这里简单的hugo博客就搭建完毕了，当然我们还需要将博客部署到github中

1.进入你的新建的远程库中选择settings 选择github页面类型 即（gitPages）选择用户组即可（默认）用户/组织页面（https://<USERNAME|ORGANIZATION>.github.io/）

选择适合自己的主题即可

3. 将远程仓库克隆到本地

git clone <YOUR-PROJECT-URL> && cd <YOUR-PROJECT>

4. 将创建好的hugo项目粘贴到本地仓库（即克隆后出现的目录）
5. hugo构建项目
6. hugo server 启动项目 去网页看一眼满意之后， ctrl+c停止 将生成的public完全删除（rm -rf public）
7. 创建一个git子模块

git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public 

8. 放入脚本deploy.sh（作用就是git添加提交推到远程库中）

#!/bin/sh

# If a command fails then the deploy stops
set -e

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

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

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
	msg="$*"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

9.创建好之后要为该脚本赋予权限chmod+x deploy.sh
10.直接运行./deploy.sh即可,这样基本一个小型博客就搭建完成
注：这样只适用于第一次初始化远程部署到GitHub，之后就可以删除粘贴的项目和deploy.sh因为上面添加的子模块是站点文件中的public子文件夹，再次部署时只需要从远程库拉取，在本地编写好博客后，更新即可

最为简单的方式：

从第8步开始部署到github pages开始，直接克隆远程仓（用户.github.io）到本地，将博客站点文件内public文件夹中所有资源进行拷贝，复制到拉取的本地仓中，进行提交即可，下次直接覆盖

总结：

1. 需要提前掌握git基本命令喔！！