在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的视频