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

雨点打透心脏的1/2处 2024-02-19 22:12 42阅读 0赞

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

官方教程【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，这里可以进去修改你的内容）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70]
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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 2]

1.  hugo

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 3]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 4]  
代码上传完毕

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 6]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9f760aef3ab948d79b51b79e63a76b05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3ac3deb3a69b400e89cb7ab974a5f84e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3d289201e09b49ceaf8e1d8e848fcf40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1c34d618d28e4170865e721d45687735.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b81ee5abc5d0465d9b5d07a65d64a782.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/69b85ea6b1884b8da2575aced3bb0672.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fe16e60812dc42aeb88e1b3242abbbe8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0dacbf3a106145d8ad085b3e4a072c7a.png