利用github搭建个人博客（超级简单，一看包会）

提示：本文默认你已经注册了github，如果还没有注册github的通许请提前移至github自行注册

---

前言

继上一片文章基于vuePress搭建个人博客（保姆级教程）没有刷到的同学可以先去看一下如何使用vuePress快速搭建本地博客。我们接着来把本地创建好的个人博客网站上传到github，生成在线可访问的个人博客。

---

一、github Pages？

GitHub Pages 是 GitHub 提供的一个免费的静态网站托管服务，它允许 GitHub 用户创建和托管自己的静态网站，这些网站可以通过特定的 GitHub 仓库进行管理和托管。说白了，就是一个可以免费提供给我们的静态服务器，我们可以免费使用，免费！免费！免费！

二、使用步骤

1.新建github项目

• 点击右上角，导航栏目中的 创建按钮**+** ，点击New repository，创建一个新的仓库。repository name仓库名称中我们填写
  用户名.github.io，用户名就是Owner里边的内容。⚠️注意：项目名称一定要是 用户名.github.io。
• 接着输入项目描述内容，点击下方的绿色的创建仓库按钮

• OK，这时候我们的博客仓库就创建好了，如下图所示：
  
• 我们做一个测试，点击creating a new file,创建一个index.html。内容就是万年不变的Hello World😁😁😁
  
  页面名称就是index.html,内容就是简单的h1标签。点击编辑框右上角的commit changes绿色按钮，合并我们的修改到main分支，项目默认分支是main分支。
  
• 书接上文，我们点击上图所示的Settings，然后点击左侧侧边栏的pages，可以看到我们的部署是否完成。
• 接着我们点击上方的蓝色地址，htpps://username.github.io/就可以看到自己刚才创建的index.html网站了。

2.导入本地博客项目到github仓库

两种方法，第一种方法（笨方法），话不多说上图：

• 点击绿色Code按钮旁边的 + ，然后再点击upload files，把我们本地项目的.vuepress/dist目录中的所有内容都上传到这里。有的同学会发现，姨？我怎么没有dist目录，哈哈哈，sorry，我的，忘记让你在项目中执行npm run docs:build啦。姨现在教你了，赶紧build一下。这时候同学就会说了，我怎么觉着这种方法就挺简单的呢？为什么说是笨方法呢？其实没有什么笨方法和好方法，只要你喜欢，你开心，你想怎么用怎么用，老子就这么用！怎么滴吧。🐂🐂🐂

• 第二种方法（推荐），上图：
  
  点击code，选择https或者SSH，SSH需要我们本地生成ssh key，然后在Settings中侧边栏位置点击SSH and GPG key 创建一个SSH key，这块的内容会另外分享一篇文章详细讲解，大家如果没有配ssh key的话，这里先用https，然后点击复制图标，把url复制下来。

• 接着打开系统终端，输入 git clone https://github.com/zhaoxiaozhao1/zhaoxiaozhao.github.io.git 后边的url就是我们刚才复制的url，输入之后回车，这时候会提示你输入username和password，我们输入git账户密码后，等待克隆接着本地就会出现git仓库啦。
  大概是这个样子，一个.git文件和我们刚写的index.html
  

• 接着我们把本地博客项目中的.vuepress/dist内容复制到我们刚克隆的项目目录中来。

• 在vscode终端中一次执行，git add . ， git commit -m ‘更新项目到仓库’ ，git push ，把代码更新到git仓库中。

• ok，这样我们的本地项目就放到github静态服务器上了，接着我们到自己的https://username.github.io/中看看是不是已经有了呢?

---

进阶内容

我们会发现，每次更新博客内容，需要到老项目中改内容，然后build，再copy dist文件中的内容到新项目中，这样会比较麻烦，那有没有什么解决方案呢？答案肯定是有啊。
其实有三种方式：

• 第一种方式：把老项目和新项目放到同一目录下，然后在build打包的时候，我们自定一个js脚本，把打包好的内容自动copy到新项目中，执行复制替换操作。
• 第二种方式：新项目中在main分支切一个template分支，用来存放老项目代码，这样就不用维护两套项目，而且把旧项目（本地博客项目）也放到了github服务器上防止了丢失。这样修改博客的时候就切到template分支，创作完build后，copy dist，在切到main，替换main分支中的文件，然后push上去，我们的博客就自动更新啦。
• 第三种方式：直接把本地博客项目放到main分支上，更新内容后，push代码，使用gitbook本地部署方案，实现自动打包部署。后续会出一期关于gitbook的详细教程

结语

关于利用github Pages搭建个人博客到这里就结束啦，有什么问题欢迎大家积极沟通哦。