在B站看到一位博主用Hugo制作个人博客的视频,感觉挺简单的,真的十几分钟就能看到云端出现自己的博客,当然了想让自己的博客更美观更炫酷,精雕细琢会花很多功夫。现在大家看到的效果,大邓用了一整天的时间,一点点修饰改动出来的。



1. 安装Hugo

这里以Mac为例,安装Hugo,命令行输入


brew install hugo



2. 新建Hugo项目

切换到桌面(我喜欢把项目放到桌面), 命令行执行


cd desktop

新建一个叫做MyBlog的hugo项目文件夹,命令行执行


hugo new site MyBlog

现在可以在桌面看到一个MyBlog文件夹,接下来切换工作目录到MyBlog


cd MyBlog

记者目前我们的命令行处于MyBlog的根目录 , 接下来下载网站主题



3. Academic主题下载

Hugo有很多主题,我选择的 https://themes.gohugo.io/academic/

在命令行逐行执行下方命令


cd themes

git clone https://github.com/gcushen/hugo-academic.git

我们可以在 MyBlog/themes 看到多了一个 hugo-academic文件夹,把hugo-academic改为academic ,现在网站已经建立好了

这里切换回项目根目录MyBlog


cd ..

命令行执行pwd,检查一下目录


pwd

得到


/Users/电脑用户名/desktop/MyBlog



4. 启动本地博客

现在我们以academic主题为例,启动博客

命令行执行


hugo server -t academic --buildDrafts

补充: t的意思是主题

执行后,在命令行中会提示我们


http://localhost:1313/

在浏览器中复制粘贴上方的链接,我们的Blog毛坯房搭建好了~



5. 在本地新建一篇文章

依旧是MyBlog根目录,命令行执行


hugo new post/first-article.md

在MyBlog/content内新生成了一个post文件夹,并且post内有了一个first-article.md文件。

接下来就是在first-article.md内用markdown方式写内容即可。

我们测试一下现在的网站,继续回到MyBlog根目录,命令行执行


hugo server -t academic --buildDrafts

在浏览器中我们可以看到有First Ariticle的文章。



6. 将本地博客部署到服务器

在github新建一个仓库,仓库名命名方式


<你的github用户名>.github.io

比如我的github账号名是thunderhit,那么仓库名为


thunderhit.github.io

在MyBlog根目录,命令行执行


hugo --theme=academic --baseUrl='/' --buildDrafts

注意: 主题academic, 网站地址 https://textdata.cn/ ,你们根据自己需要改成自己的仓库名

现在我们在MyBlog中多了一个public文件夹,其中有我们新建的文章内容。

绑定public与github仓库

命令行切换到public目录,初始化git


cd public 
git init
git add .
git commit -m '我的hugo博客第一次提交'

把public与远程github仓库关联

依次执行(大家的github地址略微不同,需要改动一下)


git remote add origin git@github.com:hidadeng/textdata.cn.git

git push -u origin master

命令行上传完毕后,在浏览器网址栏打开链接 https://textdata.cn/

就可以看到我们自己的博客了~



更多

如果大家想学仔细学Hugo,推荐大家看B站Up主:ianianying的视频



广而告之