如何用 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 [email protected]
  2. 执行下方命令
        2.1 cd  [email protected]
		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 [email protected]:qiaomengnan16/qiaomengnan16.github.io.git
    
    git push -u origin master


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

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

在这里插入图片描述

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

在这里插入图片描述

发布了38 篇原创文章 · 获赞 17 · 访问量 9019

猜你喜欢

转载自blog.csdn.net/cainiao1412/article/details/99709618