Hugo+Github

429 阅读3分钟


Hugo+Github--->个人博客 ---- 本文章记录了我在一步步搭建Hugo静态博客的过程。

一、运行环境:

---------

*Win10+Git

二、Hugo是什么?

----------

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。 Hugo还提供有[Hugo中文文档][2],文档里面也有介绍如何安装Hugo到将个人站点部署到Github仓库上。

三、开始搭建

 ------

Step 1:下载和安装Hugo

----------------

①:进入Hugo的github仓库[下载]对应自己电脑的版本;


②:下载完之后,把解压包解压,里面有一个hugo.exe文件。然后在磁盘(F:)下创建Hugo文件夹,里面再创建bin文件夹和Sites文件夹。 把hugo.exe复制到bin文件夹目录下,最后把F:\Hugo\bin路径配置到系统的环境变量Path中,保存即可。

----------

Step 2:创建站点

-----------

Window环境下以管理员身份运行命令提示符,切换到站点目录下(F:\Hugo\Sites) 接下来输入命令`hugo new site myblog`创建名为myblog的博客站点。 创建完成后会多出一个文件夹myblog,里面有很多子文件夹(content,themes等等)。

----------

Step 3:选择主题

-----------

①:进入Hugo主题[官网][4],选择自己喜欢的bolg主题风格,选好之后一般都有安装方法介绍。例如:


根据网站给出的代码,拷贝,再把拷贝的代码`git clone https://github.com/sourcethemes/academic-kickstart.git My_Website`输入,这一步的前提是一定要先安装Git工具;

②:预览 待主题安装成功后,输入`hugo server -t 主题名称 --buildDrafts`,按回车键,会出现如下打码:


其中化黄线的链接就是在本机预览的链接,打开便可以看到个人博客添加主题后的样子。

----------

Step 4:第一篇博客

------------

①:回到myblog根目录:输入命令`hugo new post\myblog.md`即可新建一个后缀是md的文件,用来写博客的内容。 一般用vim命令,vs code可以编辑;

②:写好内容之后,再在本机预览一遍,输入预览命令`hugo server -t 主题名称 --buildDrafts`,打开链接即可预览; 预览成功后,接下来便是把整个站点推到Github仓库中。

----------

Step 5:新建Github仓库

-----------------

**在Github主页选择New rpository选项:

** **这里注意`Owner``Repository name`尽量要保持一致**,

并在后面加上`.github.io` !


完成以上步骤后按`Create repository`按钮即可创建一个仓库。 接下来就是把站点挂载到刚刚新建的仓库中

----------

Step 6:部署到Github

---------------

①:关联你的Github:输入`hugo --theme=主题名称 --baseUrl="https://xxx.github.io"(xxx表示你的github..) --buildDrafts` 按回车键后发现根目录下多出一个`public`的文件夹;

②:输入`cd public`切换到public目录下编辑: 一行一行输入

```
git initgit add .
git commit -m "简介"
git remote add origin https://github.com/xxx/xxx.github.io.git 
git push -u origin master
```


如果第二次上传需要修改的内容: 在执行`git push -u origin master`之前先执行`git pull origin master`

**最后访问`xxxxx.github.io`这个网站,便是你的博客。至此静态博客Hugo完成。



ps:这是我第一次写博客,可能有很多表达不清或者错误等,欢迎各位提出问题或者留言告诉我。

未经同意不得转载。 觉得对你有帮助的话可以点个赞或收藏,谢谢。