美文网首页
记录一下如何用 Hugo 和 Github Page 建立简单的

记录一下如何用 Hugo 和 Github Page 建立简单的

作者: HappyJoo | 来源:发表于2021-12-16 12:49 被阅读0次

    Hugo

    在 Ubuntu 下载 Hugo

    不建议在 windows下面使用 Hugo,因为会出问题。(为什么用 Hugo 上传到 Github Page 没办法正常显示)我折腾了好久,还是不知道怎么解决,只能转到 Linux 了。

    至于如何使用 Ubuntu,要么用 WSL ,要么用 VM,反正需要用 Linux。这里就不放教程啦,网上一大堆啦。在 Ubuntu 下面直接安装即可,其他 Linux 就自己搜索一下吧。

    sudo apt-get install hugo
    

    使用 Hugo 创建新的博客 Blog 并安装主题

    先创建一个site

    hugo new site my-first-blog
    

    然后进入文件夹初始化(需要先下载 git:sudo apt-get install git。不过一般来说最新版本的 Ubuntu 都会预装 git 了)

    git init
    

    然后去 Hugo 的官方主题站寻找你喜欢的主题,像我是用了 anatole,然后把主题添加到 theme 文件夹里面。

    git submodule add https://github.com/lxndrblz/anatole.git themes/anatole
    

    然后要在config.toml里面加一句theme = 'anatole'。或者可以像我一样,去 anatolegithub下载作者给出来的example config.toml,直接复制粘贴,然后自己可以改改标题什么的。而且还有不少东西可以修改,例如改头像什么的,但是暂时还没弄。

    新建你的第一篇博客

    hugo new posts/my-first-post.md
    

    文章必须在 posts下面,又因为是用markdown写的,所以是.md结尾。至于能不能用普通格式,还没研究。写完后要把 draft改成false,避免被当做草稿而没有发表。

    在本地预览你的博客页面

    hugo server -D
    

    -D就是把草稿也一起预览了,如果不带就不会预览草稿,也就是 draft: true的文章。接着就可以打开浏览器,输入http://localhost:1313/开始浏览你的博客。你的网站不一定是我这个,看终端的输出。

    生成静态页面

    hugo #同样,带`-D`就是把草稿也生成了。
    

    会生成一个public文件夹,这个文件夹就是最终产物,只需要把它移到我们的 Github Page 就搞定了。

    参考:Hugo Quick Start

    Github Page

    Hugo 部分算是搞定了,接下来搞搞 Github Page。
    注册啊、入门啊、生成 ssh key 啊,这些我全部略过了,直接搜索一下就好了。

    至于如何简历 Github Page,也是搜索一下就好了,可以看看这个三分钟在GitHub上搭建个人博客。反正很简单。

    至于 theme 选不选,README 要不要建立,无所谓,反正用不上,或者要用的时候自己再建一个就可以了。

    Hugo 与 Github Page 连接

    进入到你的 Hugo blog 文件夹下面的 public 文件夹,然后将它用 git 初始化。并且添加你刚刚创建的 repository(仓库)的网址,然后上传 public 里面的文件即可。

    cd public
    git init
    git remote add origin git@github.com:<name>/<name>.github.io.git # 最好用ssh,不要用https,似乎会比较顺利。
    git pull origin main #这一步不是必要的
    git add .
    git commit -m 'add my first blog'
    git branch -M main #修改 branch
    git push origin main
    

    git branch -M main是用来把 master 改成 main的。因为之前黑人运动,github 把默认是 master 的主分支,改名成了 main,但是 git 这个工具还没修改好,默认创建是还是 master。这时候去合并就会出现两个支,比较麻烦。或者你也可以手动修改 git 的默认创建——git config --global init.defaultBranch main也可以去 github 修改主分支的默认名字

    理论上,现在你的 public 的文件,就被上传到 github 去了,然后直接输入网址,例如我的是 happyjoo.github.io,即可访问自己的博客了。(不行的话得等等,github 的服务器有时候会慢一点,毕竟是免费的。)

    后续博客的更新

    至于之后的更新,就是在你写好文章后,先用 Hugo 刷新 public 里面的文件,然后在 public 文件夹下面先 pull,再 push,应该就可以了。

    你也可以把整个 blog 文件夹上传到 github 的仓库中。这样可以进行版本控制,也可以以防你需要在其他电脑进行更新。

    相关文章

      网友评论

          本文标题:记录一下如何用 Hugo 和 Github Page 建立简单的

          本文链接:https://www.haomeiwen.com/subject/zdomfrtx.html