如何用hugo来搭建个人博客

用到的东西有:cmder，vscode，GitHub，hugo

生成自己的博客

1.安装hugo：请去hugo官网下载安装包，解压

2.将hugo添加到环境变量里：文件资源管理器---此电脑---右键，点开属性---点击高级系统设置---点击环境变量---找到系统变量里的path-打开path，把你的hugo安装路径添加进去。比如我的是：D:\Software\hugo。---然后连着点击三次确定，环境变量配置好了就应该和下图一样

a.png

3.打开cmder,运行hugo version,出来版本号，就说明配置好了

4.进入hugo官网，点击quick start

5.先在资源管理器中新建一个文件夹，比如：test，然后用cmder进入这个文件夹

6.然后回到官网，从第二步开始（因为第一步是下载，已经完成了），复制里面的代码hugo new site quickstart到cmder，把quickstart删掉替换成'xxx.github.io-creator'（xxx代表的是你的GitHub用户名，注意全部要小写）

7.进入'xxx.github.io-creator',接着分别复制 git init 和 git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke这两段代码，粘贴到到cmder

8.复制 echo 'theme = "ananke"' >> config.toml

9.复制 hugo new posts/my-first-post.md（my-first-post是文章的名字，你也可以改其他的）

10.然后用vscode打开上一步创建文章的md文件，在里面写博客内容，注意要用markdown语法，然后去上面找draft：true，把true改成false，保存，看下图

b.png

11.在vscode中打开终端，运行hugo server-D，出来一大堆看不懂的东西，看下图文字提示的地方，Ctrl+单击就可以打开，网站就生成了

c.png

12.回到vscode，打开config toml，修改以下内容，修改了以后，回到网站，你会看到网站也发生了相应的变化

d.png

13.再回到vscode，新开一个终端，刚才的不要关闭，在终端内输入教程的最后一步——hugo -D，此时生成了一个新的目录——public，

其实到了这一步，博客已经生成了，只不过你只能通过 hugo server -D来打开博客，接下来我们做的就是把代码部署到github，通过github就能访问博客

1.我们先在'xxx.github.io-creator'这个目录下新建一个文件——.gitignore（记住前面有个点）在这个文件中写入内容——/public/，保存
2.在vscode中输入命令——cd public,进入public这个目录，
3.输入命令——git init
4.输入命令——git add .（后面有个点）
5.输入命令——git commit，会出现下面这样的界面，在最上面写第一次部署，写完就关闭

e.png

6.此时一切准备就绪，就可以上传到github了，先在github上新建一个仓库，名字必须叫——xxx.github.io（xxx是你的github用户名）
7.创建成功后，会出现一个页面，你只需找到下面两行命令，分别复制这两行命令，粘贴到vscode中的终端中（minglang197/HTML-img.git 是我的仓库名字，你要改成你自己的，）

f.png

8.复制完两行命令后，到github刷新页面，就会发现文件已经上传成功了

如何用github打开博客

1.点击下图最右边的setting，

g.png

2.找到github pages，如果你和我的一样，直接点击链接即可访问博客

h.png

i.png

这是我搭建hugo博客的步骤，如果有什么问题的话，请私信我，一起讨论交流