前言

在搭建个人博客时，遇到了各种阴间问题，为此我删了起码七个库，都是泪，归根到底就是两个问题，一是主题配置，二是远程连接

hugo（静态网站生成器）

Hugo是一个快速、灵活且功能强大的静态网站生成器。它使用Go语言开发，旨在帮助用户轻松创建和管理网站

hugo中文文档

hugo下载地址

生成站点

使用Hugo快速生成站点，比如希望生成到 /path/to/site 路径：

win+r输入cmd调用命令行

hugo new site /path/to/site

这样就在 /path/to/site 目录里生成了初始站点，进去目录：

cd /path/to/site

站点目录结构：

archetypes/:存放内容模板的目录
content/:：存放所有内容文件（如Markdown文件）的目录。
layouts/:存放布局文件的目录。
static/:存放静态资源（如图片、CSS、JavaScript等）的目录
config.toml(yaml):站点的配置文件。

在这个目录下，最主要的是对hugo.toml，themes/的配置。创建的所有.md文件都放置在content/文件下，所有文章的图片都放在static/下面

创建文章

创建一个 about 页面

hugo new about.md

about.md 自动生成到了 content/about.md ，打开 about.md 看下 — title: Chinese Test description: 这是一个副标题 date: 2020-09-09 slug: test-chinese image: 文章封面图片 categories: - Test - 测试 —

title: 页面或文章的标题，这里是 “Chinese Test”。
description: 页面或文章的描述，这里是 “这是一个副标题”。
date: 文章的发布日期，这里是 “2020-09-09”。
slug: 文章的URL别名，这里是 “test-chinese”。
image: 文章的封面图片，这里是 “helena-hertz-wWZzXlDpMog-unsplash.jpg”。
categories: 文章的分类，这里有两个分类：“Test” 和 “测试”。
draft:草稿，建议直接设为false

正文内容

创建第一篇文章，放到 post 目录，方便之后生成聚合页面

hugo new post/first.md

安装皮肤

一个好看的主题是必要的，但是完全自己去写就太麻烦了，hugo中有很多精美的主题，比较方便的操作是在Hugo项目目录里面使用Git命令来克隆themes：你需要提供主题的 Git 仓库 URL。通常，主题的仓库 URL 可以在 Hugo Themes 官方网站或主题的文档中找到。

git clone https://github.com/author/theme-name.git themes/theme-name

或者直接下载主题的压缩包，将其解压到themes/文件夹下，这样的话，就需要你对hugo.toml文件进行一点过的修改。

每个主题文件里面都有对应的配置教程和演示网站，比如stack在exampleSite文件夹里面

配置hugo.toml

好多教程里面直接就说会生成config.yaml文件，但事实上新版的都是生成的hugo.toml，这不免让第一次配置的人感到迷惑，这两种的使用都是可以的，只是在语法结构上会有区别(类似于c++和python)，如果你想要完全自己手搓，按照你喜欢的语言就好，如果像我一样，只想点点鼠标，那就主要观察你下载的themes里面它使用的是什么，跟着用就行。

配置文件可以理解为对这个项目的总的配置，比如修改网站的标题等

使用主题前最好看一下主题相应的配置教程，不同的主题是不一样，主题就是别人写好的网站的模板，而你就是去套用别人的模板。

theme = “my-theme” my-theme是你下载的theme的主题名，要和你解压的文件名一致

配置还有很多，可以结合网上资源或自己专业知识定制自己的网站，类似：

1
2
3
4
5
6
7


    sidebar:
        emoji: 🍔
        subtitle: 所行皆坦途,所愿皆如期
        avatar:
            enabled: true
            local: true
            src: img/avatar.jpg

生成网站

需要注意的是，虽然我们做了这么多，但是在这个结构下(在 my-site这个结构下)，我们网站的页面实际上是还没有生成的，要想生成静态网站页面，必须运行如下命令

hugo

命令运行后，在上文提到my-site这个结构下会产生一个public/文件夹，里面保存生成的静态页面，后面将其在GitHub上面布置，实际上就是将public/中的内容远程推送到Github仓库中后进行展示。

hugo server

可以在本地预览你生成的网站，点击链接就可以在你本地的电脑看到自己搭建的网页的，但是这只是完成了一半，你需要将其托管到github page上，别人才能通过网址找到你的网站，github page是最简单且免费的方法，当然便宜的东西是有缺陷的，如果以后自己想深入，就需要买个域名和服务器了

推送到GitHub

首先在GitHub上创建一个仓库，名字最好和你自己的名字一样，其实也无所谓，但是好多人都这么做，但我不是

在pubilc文件夹中创建仓库

记得cd 进入对应的文件夹

其实远程连接在我的git博客上有详细的教程，这里我大概说一下

git init 初始化仓库 git add. 增加所有修改的意思 git commit -m “备注” 提交到远程仓库“备注随便写，你写我是傻逼都行”

将两个仓库链接起来

这一步是最恶心我的，不知道为什么，不能用http链接，只能用ssh链接大概意思就是你需要在你的电脑生成一个ssh链接，然后将其放到GitHub的配置上

这步是参考别人的

打开git bash命令窗口

生成ssh key

ssh-keygen -t rsa -b 4096 -C “your_email@example.com” your_email@example.com为github上你注册的email地址。

然后直接三个enter不管他

上面默认生成在用户主目录的.ssh目录下，可以自己输入自定义位置

把ssh key添加到github

复制文件c/Users/Administrator/.ssh/id_rsa.pub内容，把key添加到：github > settings > SSH and GPG keys > New SSH key > 粘贴保存。

测试SSH连接

ssh -T git@github.com

如果成功的话你就可以通过SSH方式来clone及提交代码了

git branch -M main // 创建一个分支

git remote add origin https://github.com/your-username/your-repo.git //使用 git remote add 命令将远程仓库添加到仓库配置中

git remote set-url origin git@github.com:your-username/your-repo.git //使用 SSH 连接后，可以使用 SSH URL 推送到 GitHub 仓库

git push -u origin main //推送文件

后续提交

hugo //在站点中运行

cd public/

git add . //提交文件

git commit -m “备注” //推送到远程：在ssh已连接的情况下

git push -u origin main

个人博客搭建

因为有海，所以披星戴月；因为有梦，所以奋不顾身。

前言