windows从零搭建hugo博客

写在前面的话

作为一个计算机专业的学生，平时没有好好学习，可又没想过转专业，听说程序员和博客很配，我早就想过搭建一个个人博客了，可是直到大四我才真正动起手来。我是按照在bi站上的一个大神CodeSheep搭建博客的视频（https://www.bilibili.com/video/BV1q4411i7gL?t=477）操作的，可是对于我这种小白来说，他的教程不能算得上详细。。我在网上各种百度，各种操作，忙活了一星期才完成（别怕，是我太笨。。其实一个小时就能全搞定）。下面，我会把搭建博客的方法写下来，与网上各种方法不同的是，我这个真的算的上零基础，我会把中间会用到的各种工具下载使用链接都发过来（有的工具官网下载只有20KB，实在太慢，我会给网盘链接）。

一、（下载hugo）

1、hugo官方下载地址https://github.com/gohugoio/hugo/releases

这个很慢，所以（你懂得）

链接：https://pan.baidu.com/s/1LJoRF1eA1u6GMHRRUnEnYg
提取码：kdvj

2、创建文件夹。此处举例：E盘创建 hugo/bin，将解压后的**hugo.exe放到bin**目录下。

3、配置系统环境变量。将**E:\hugo\bin加到path**变量中，

以上设置好后，就可以在cmd中查看是否安装成功。执行命令：

$ hugo version

Hugo Static Site Generator v0.75.1-A4A7BAB7 windows/amd64 BuildDate: 2020-09-15T06:48:58Z　　显示该条即表示成功

二、生成站点

进入E:\hugo下，打开命令窗口。(可用cmd，也可选择下载安装Git，推荐安装git，后面也得用到。下载安装教程，这个兄弟也是让在官网下载，所以

链接：https://pan.baidu.com/s/1X_mjbTEimjz2FRaBj5v7OQ
提取码：2gv9)

$ hugo new site 文件名称 (如myblog)

执行后，在hugo目录下就会生成一个 名叫myblog的站点文件夹

进入myblog，显示以下目录结构：

• archetypes　(存放default.md，头文件格式，每次新建文章默认显示的头部信息在此修改)
• content 　　 (存放博客文章，markdown格式文件)
• data (存放自定义或者导入的模板)
• layouts (存放网站的数据模板)
• static (存放图片、css、js等静态资源)
• themes (存放主题文件，每个主题都是一个独立的文件夹)
• config.toml (网站配置文件)

三、创建文章

进入站点根目录myblog下，执行命令：

$ hugo new post/test.md

执行后，会自动在content/post下生成 test.md文件，打开可编辑内容(markdown编辑器推荐Typora， 下载地址: https://www.typora.io/#windows 这个下载挺快的，想要网盘的也有：

链接：https://pan.baidu.com/s/1dfaJs6nvdeXtDyrItuEfHQ
提取码：aoy4)，ps.文件头部的draft要改为false，这样部署后才能看到文章。

当前网站是没有任何内容的，需要下载个主题。

（附上Typora使用教程）

四、下载主题

$ git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c

也可以直接下载压缩包解压到themes目录，我这里有几款主题，可以试一试：链接：https://pan.baidu.com/s/1MDU2yOb41jC88CjnePSJnQ
提取码：schw

(ps.可去https://themes.gohugo.io官网选择其他主题下载)

这样themes下就多了一个文件夹，文件夹名即为主题名称。此时可回到站点目录下打开config.toml(工具推荐vscode 安装教程：https://blog.csdn.net/x15011238662/article/details/85094006 网盘：链接：https://pan.baidu.com/s/1VbH3q1BLPkxxc1zk8knLTg
提取码：0ir8 ）
配置指定主题。如theme = “m10c” 没有theme参数就自己写上

站点根目录下，执行命令：

hugo server --theme=m10c --buildDrafts

其中 --theme 选项可以指定主题，–buildDrafts 包括标记为草稿

执行后会显示

…此处省略上方信息

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop

可访问：http://localhost:1313/ 查看效果

五、部署github pages上

前提：已注册GitHub，登录

1、登录后，点击右上角，出现下拉菜单，点击 Your repositories 进入页面

2、点击 New

3、进入 Creat a new repository 页面

4、图中的 yourname 要换成自己的github的用户名，即上图中Owner显示的用户名。最后点击Creat repository即完成

站点目录**config.toml中baseURL**要换成自己建立的仓库，如baseURL = “https://yourname.github.io”

进入站点根目录下，执行：

$ hugo --theme=m10c --buildDrafts --baseUrl="https://yourname.github.io"

注意：这里的 --baseUrl 一定是https://（Hugo中文文档里为http://），不然你部署后的博客会没有样式！

执行后，站点根目录下会生成一个 public 文件夹，该文件下的内容即Hugo生成的整个静态网站。每次更新内容后，将 pubilc 目录里所有文件 push到GitHub即可。

首次使用的时候要执行以下命令：

$ cd public

$git init

$ git remote add origin https://github.com/yourname/yourname.github.io.git (换成自己的)　　将本地目录链接到远程服务器的代码仓库

$ git add -A

$ git commit -m "first commit"

$ git push -u origin master

然后浏览器里访问：https://yourname.github.io/ 即可看到刚刚搭建的博客。

六、写博客

后面自己再写博客或者有什么改动，就可以执行以下代码上传：

---

–新建博客markdown文件，并编辑博客内容(文件名为 xx.md ")

$ hugo new post/newBlog.md

–生成静态页面

$ hugo --theme=m10c --buildDrafts --baseUrl=“https://yourname.github.io/”

–发布

$cd public

$git add .

$git commit -m “new blog added”

$git push origin master

---

如果大家用typora编写博客插入图片不显示的话，下一篇我会继续分享。