免费制作自己的GitHub博客！手把手保姆级教学！

Rezzo
140 阅读4分钟

免费制作自己的GitHub博客！手把手保姆级教学！

第一步：申请一个GitHub账号

这两天照着网上的教程做了一个，分享一下经验

宝宝级教学，从申请账号开始

点击GitHub ： 点击右上角 sign up（注册）, 输入邮箱，密码，昵称，完成后面的验证，然后一些小问题都不怎么重要，随便看着选一下就行了，看不懂可以机翻看一下

注册

然后右上角点击"Your repositories"

repositories

然后点击那个绿色的new ,新建一个仓库

new

Repository name 必须填自己的 ID名称 + .github.io。这个仓库里放的东西，就是你的博客网页文件

create-githubio

建好以后，还什么都没有

after-create-githubio

第二步：前期准备

我们需要下载一个git，本地进行一些操作

download-git

安装git，基本上无脑下一步，这有个选择默认编辑器的，我用的是Notepade++，可以选自己熟悉的用

install-git

安装hugo，这个就是将你的网站本地生成好的东西，然后把生成好的文件上传到上面那个仓库里，就直接能显示了

如果你在使用 Windows，我推荐使用 Scoop 来安装 Hugo：

powershell在powershell里输入下面的命令 安装scoop

	Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
	# 或者更短的命令
	iwr -useb get.scoop.sh | iex

Note: if you get an error you might need to change the execution policy (i.e. enable Powershell) with 如果遇到error或者need to change the execution policy 输入

	Set-ExecutionPolicy RemoteSigned -scope CurrentUser

安装hugo

	scoop install hugo-extended

再新建一个叫blog的仓库，用来存hugo的网站文件

blognew

git ssh配置，方便以后的下载上传

找一个位置

workspace

将两个仓库拉到本地

gitlinkclone 到本地，两个连接均可，网络不好就用ssh，网络状态好可以用https的

	git clone git@github.com:ReggieRezzo/ReggieRezzo.github.io.git

clone下载好后，显示下载好的文件夹

	ls

进入ReggieRezzo.github.io文件夹

	cd ReggieRezzo.github.io

创建README文件

	touch README.md

添加全部文件

	git add .

填写说明

	git commit -m "Init commit"

上传到GitHub

	git push origin main

初始化完成，blog仓库同理

相当于你复制了一份GitHub仓库到本地，然后在本地做了修改，将修改的内容再上传给GitHub

你本地是一个离线的GitHub仓库，只有你push的时候才和GitHub在线仓库同步readme

可能的麻烦

最大的麻烦就是GitHub的网络问题了，可以试着Git 挂代理，科学上网，改DNS等方式百度解决

前期准备工作做好以后，文件夹应该是这个状态

workspace2.png进入blog文件夹blog1.png

右键，点击Git Bash Here，打开命令窗口

gitbushhere.png

输入如下命令，新建一个hugo site文件夹

	hugo new site ReggieRezzoBlog
	# 你可以把后面的文件夹名称换成你的

newsite.png

选择一个hugo 主题

hugo.pngchoose.pngdownloadtheme.png跳转到主题的GitHub页面

将这个项目clone到本地的themes文件夹

clonetheme.pngdownloadtheme2.png

	git clone "你选的主题的链接"

config.png将网址改成自己的github.io地址 如：ReggieRezzo.github.io/

标题随意，之后添加主题，名称就是上面下载的文件夹的名称

本地运行

在/blog/ReggieRezzoBlog/文件夹下（能看到你刚才配置的文件），右键打开命令行

	hugo server

hugoserver.png出现了错误

根据提示，我去主题作者的演示网站里，复制了一份他的配置（上面那几条用自己的）even.pngOK,本地hugo服务器运行成功hugolocal.png打开浏览器在地址栏输入：

	127.0.0.1:1313

可以看到网站正确显示了hugosuccess.png遇上错误，先去作者那看看文档，看看演示网站，一般都能解决，实在解决不了，就换一个主题吧

添加文章

Ctrl + C 先停掉临时本地服务器

输入命令，生成文章，格式是md（MarkDown）格式

	hugo new post/POST_NAME.md

这个文件夹，有的是posts 有的 是postpost.png文件名，标题这都可以自己决定，draft要么删掉要么改成 false，否则不会显示在网页上firstpost.png点进去的效果：show.png

同步到网络上显示

我们创建了两个仓库，ReggieRezzo.github.io 仓库，用来放hugo准备好，直接就能显示的网页

blog 用来放原始的文件数据

将 ReggieRezzo.github.io 作为 blog 的子模块
	# 改成你对应的仓库地址
	git submodule add -b main git@github.com:ReggieRezzo/ReggieRezzo.github.io.git public

submodule.png

生成静态网站代码

此时public文件夹还是空的

	# 引号内改成你的主题名称
	hugo -t "hugo-theme-even"

staticpublic.png这表示网页生成成功了publicsucess.png

上传到GitHub

进入public文件夹

	git remote -v

remote.png这里显示的就不是blog的仓库地址了，而是作为子模块的仓库的地址

输入下面的命令

	git add .
	git commit -m "Init"
	git push origin main

成功上传后finally.pngresult1.pngresult2.png

显示成功

result3.pngresult4.png

备注

添加新文章：在/content/post/里创建新的md文件，然后在rezzoblog里用hugo生成到public里，最后在public里上传到仓库

其它的网站详细配置，就看作者的demo和操作文档看着配置了，这个需要个人自己慢慢研究了

avatar
文章
阅读
粉丝