在github.io部署个人博客hugo,2023新教程

对其他教程的吐槽:你们的教程真的还能用吗?

1 安装前置

前置软件包括:

  • Git
  • Golang
  • Hugo

这些都可以用choco安装,安装choco的方法见https://chocolatey.org/install 。

choco install git
choco install golang
choco install hugo-extended

2 在本地部署Hugo

先验证hugo是否安装成功:

hugo version

然后正式开始,建议新建一个文件夹作为博客的工作区。在这个文件夹下新建项目:hugo new site <blog>

hugo new site 

这样就建立了一个文件夹。进入这个文件夹:cd <blog>

然后初始化当前目录中的空 Git 存储库:

git init

下一步就是安装主题,在https://themes.gohugo.io/ 里可以找一个你喜欢的,在主题的页面里一般都可以找到安装方法,一般格式是:git submodule add <https> themes/<themename>

git submodule add

然后一般能在<themename>文件夹内找到exampleSite文件夹,把里面的文件复制到<blog>文件夹里。

注意!现在的<blog>文件夹里的默认配置文件是hugo.toml,而一般的exampleSite里的配置文件一般是config.tomlconfig.yaml,而一个网站只能有一个配置文件,且这三种文件名都是可以的。所以复制的时候记得把原来的hugo.toml配置文件删掉。

然后就可以开始本地部署了:

hugo server

从返回的信息里可以看到本地网址:http://localhost:<port>/,复制到浏览器里,就可以看到这个主题的示例了。

3 把Hugo部署到github上

这一部分是本教程其他所有中文教程都不同地方,其他的教程都不知道是哪个时代的方法了,废话少说,正式开始。

先创建新存储库。只需要填上Repository name那一栏,格式为<name>.github.io。如果你想让你的博客网址就是.github.io,则<name>不能是任意名字,必须是你的github用户名。

其他都不需要动,点击Create repository就行了。

然后返回<blog>文件夹里,把这个本地库连接到远端库:git remote add origin git@github.com:<name>.github.io.git

git remote add origin 

把这些修改后的文件添加到本地库,并标记上“提交信息”:

git add .
git commit -m "commit message"

"commit message"填啥都可以,这个是用来标记这次更新的内容。

把“主干”设置为“main”:

git branch -M main

最后把本地库的内容推送到远端库:

git push -u origin main

下一步是进入https://github.com/<name>/<name>.github.io,点击上方栏的Settings,然后点击左方栏的Pages,在Build and deployment里的Source中选择Github Actions,在下面找到Hugo,点击Configure,在新界面点击右侧的绿色按钮的Commit changes...

找不到Hugo就去browse all workflows里找。

然后hugo就开始在github上部署了,部署好后就可以在Pages页面看到Your site is live at ...,点击Visit site就可以访问博客网站了。

4 后续写博客

后续更新只需要在content文件夹加入md文件,然后执行

git add .
git commit -m "commit message"
git push -u origin main

这三句指令就可以了

5 补充

第一次用git的话记得设置名字和邮箱。

git config --global user.name "user.name"
git config --global user.email "user@email.com"

还有可能需要的设置代理:

git config --global http.proxy http://127.0.0.1:7890
git config --global https.proxy https://127.0.0.1:7890

还有取消代理:

git config --global --unset http.proxy
git config --global --unset https.proxy
GitHub.io是一个用于托管静态网页的服务,可以用来展示个人项目、博客等内容。如果你想美化你的GitHub.io页面,有以下几种方法可以考虑: 1. 使用自定义域名:通过给你的GitHub.io页面绑定自定义域名,可以让页面的网址更加个性化。你可以购买一个域名,并将域名指向你的GitHub.io页面。这样,访问你的网址时会显示你的自定义域名。 2. 使用主题:GitHub.io支持使用Jekyll主题来美化页面。Jekyll是一个静态网站生成器,可以帮助你轻松地创建漂亮的页面。你可以在GitHub上搜索Jekyll主题,选择一个你喜欢的主题并应用到你的GitHub.io页面上。 3. 自定义CSS样式:如果你对前端开发比较熟悉,你可以在GitHub.io页面中添加自定义CSS样式来美化页面。通过修改页面的样式,你可以改变字体、颜色、布局等,使页面更加吸引人。 4. 添加图片和媒体:通过在GitHub.io页面上添加图片和媒体元素,可以增加页面的视觉效果。你可以在页面中展示项目截图、头图或者其他相关图片和视频,以增强页面的吸引力。 5. 使用插件和工具:有很多开源的插件和工具可以帮助你美化GitHub.io页面。比如,你可以使用Font Awesome插件来添加矢量图标,使用Google Fonts来选择更多的字体样式,使用Animate.css来添加动画效果等。 以上是一些常见的方法,你可以根据自己的需求选择适合的方式来美化你的GitHub.io页面。希望能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值