如何用 hugo 搭建个人博客,并且使用 GitHub Pages 预览 HTML

直接进入正题,开始搭建博客步骤

官方教程【https://gohugo.io/getting-started/installing】

Mac安装方式

  1. brew install hugo
  2. hugo version

Windows安装方式

  1. 去 Hugo releases 页面 【https://github.com/gohugoio/hugo/releases】 下载 hugo_xx_Windows-64bit.zip

  2. 解压,把hugo.exe 放到 D:/Software/hugo/hugo.exe

  3. 把D:/Software/hugo/加到PATH , 重启终端,运行hugo version 查看版本

新建一个项目文件夹,例如名字叫 HelloHugo

执行命令

  1. cd HelloHugo & hugo new site yourGitHub@github.io-creator
  2. 执行下方命令
        2.1 cd  yourGitHub@github.io-creator
		2.2 git init
		2.3  git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
		2.4 echo theme = "ananke" >> config.toml
  1. hugo new posts/开博大吉.md (PS,这里可以进去修改你的内容)
    在这里插入图片描述
  2. 修改语言
config.toml 未修改的时候:

    baseURL = "https://example.org/"
    languageCode = "en-us"
    title = "My New Hugo Site"
    theme = "ananke"
    
Ctrl + P 打开 config.toml 修改为下方

    baseURL = "http://example.org/"
    languageCode = "zh-Hans"
    title = "梦楠的博客"
    theme = "ananke"
     
将语言设置成中文
  1. hugo server -D

在这里插入图片描述

按照上方命令执行完成后,最后一个服务启动命令会输出一个地址给你,打开这个地址,就能看到你的博客啦

在这里插入图片描述

  1. hugo
最后执行这个命令,这个命令会生成一个public文件,这个文件夹里包含的就是就是最终给你上传到github上使用的页面。

下面将代码推送到你的github上面去,然后进行再github上的预览

  1. 先到github上建立一个repository,记得这个repository的前缀名称要和你的github用户名一样,就是xxx.github.io,一定要按照这种规范来写,之后需要做预览的事情,看下图。

在这里插入图片描述

  1. 执行下方的git命令
cd public
    
    git init
    
    git add .
    
    git commit 
    
    git remote add origin git@github.com:qiaomengnan16/qiaomengnan16.github.io.git
    
    git push -u origin master


在这里插入图片描述
代码上传完毕

  1. 设置你的github预览界面
    在这里插入图片描述

在这里插入图片描述

按照图上的步骤,找到 GitHub Pages 页面,笔者已经设置过,所以我们显示会不同,没有设置过那里是一个下拉按钮,选择Master就可以了,然后访问上方箭头的地址,就能看到你的博客啦~!

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值