孟栗典的宝藏

从未忘记那天对你立下的誓言！

0%

第1期丨基于Hexo框架的GitHub网站搭建教程

发表于 更新于
摘要：大家好，我是喜欢编程的体育生——孟栗典~你们也可以叫我典典，作为一名计算机爱好者，平时喜欢把自己的学习心得或是一些踩坑、易错的过程记录下来，所以建立了此博客.....

大家好，我是喜欢编程的体育生——孟栗典~

你们也可以叫我典典

作为一名计算机爱好者，平时喜欢把自己的学习心得或是一些踩坑、易错的过程记录下来，所以建立了此博客，今天典典来教大家如何利用GitHub来搭建一个自己的个人博客平台

相信GitHub大家都有听过，甚至是经常使用，它除了可以作为开源源码的交流平台，还提供了部署静态网页的功能

一、环境准备

在搭建Github博客之前，先准备一下环境（一定要按照下方的顺序来安装哦）

1.安装Git

官方地址：https://git-scm.com/
访问Git官方地址，下载对应的安装包，进行安装（简单的点击下一步）
安装好之后，鼠标右键可以看到：Git Bash Here，打开后输入：

1
git --version

出现版本信息，说明git安装成功

2.安装Node.js

官方地址：https://nodejs.org/en/download/
访问node.js官方地址，下载对应的安装包，进行安装（简单的点击下一步）
安装好之后，配置环境变量

1
node -v

出现版本信息，说明node.js安装成功

3.安装Hexo

1
2
npm install hexo -g
hexo -v

出现版本信息，说明hexo安装成功

4.安装Hexo依赖

1
npm install --save hexo-deployer-git

二、Git配置SSH key

相信看到本文的你应该听说过GitHub，并且也注册了自己的github账号，如果现在还没有的注册，可以去GitHub注册一个账号
官方地址：https://github.com/

为什么要配置SSH key？
目的：可以免密的将本地的源码和资源上传到github，无需要每次都输账号和密码

先看本地是否配置好SSH key

1
cd ~/.ssh

可以看到提示：/c/Users/Administrator/.ssh: No such file or directory
备注：因为ssh配置好之后是保存到 c:/用户/Administrator/.ssh

1.配置ssh

备注：这里的邮件地址是你github账号绑定的邮件地址。

输入生成命令：

1
ssh-keygen -t rsa -C "邮件地址"   #这里的邮件地址是你github账号绑定的邮件地址。

输入指令后，连续回车三次即可

可以看到在用户文件夹下生成了一个ssh文件夹
进入到ssh文件夹，复制id_rsa.pub文件里全部内容

接着打开github主页，点击个人设置，点击左侧的SSH and GPG keys，点击New SSH key
将id_rsa.pub复制的内容粘贴到key中，title随便起一个就行
点击 Add SSH key

2.测试是否成功：

1
ssh -T git@github.com

输入测试命令后，接着输入yes，出现hi!这个回应说明成功

配置账号和密码：

1
2
$ git config --global user.name "自己的" #你的github用户名
$ git config --global user.email "自己的" #填写你的github注册邮箱

三、搭建个人博客

1.新建博客

开始之前先介绍一下heox的基本命令

1
2
3
4
5
6
7
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

对应的缩写，比如：

1
2
hexo n == hexo new
hexo g == hexo generate

新建一个保存博客的存放目录，比如典典的是：C:\Users\lidia\Desktop\Blog

进入到本地博客存放目录，初始化个人博客：

1
hexo init

可以看到博客存放目录出现了很多内容：

生成静态网页：

1
hexo g

预览：

1
hexo s

在浏览器访问：
http://localhost:4000/

可以看到访问没问题
但这个只是在本地预览，接着将这个博客部署到GitHub

2.部署到GitHub

新建一个GitHub仓库。

给仓库起个名称，注意！注意！注意！
仓库名称格式： 用户名.github.io
典典的仓库名称为：LidianMeng/LidianMeng.github.io

这个仓库名称将作为你github博客的访问地址

编辑_config.yml，_config.yml在博客存放目录下，拉至文本最后：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:LidianMeng/LidianMeng.github.io.git #仓库地址改为自己的
  branch: main #看自己的github仓库是master还是main，我这里是main，所以就填写main

发布到GitHub

1
hexo d

在浏览器访问:https://LidianMeng.github.io/

可以看到成功访问，这个博客地址已经是部署到了公网

四、编写博客

搭建好博客之后，日常中肯定是需要编写博客并且同步到github
新建一篇名为：chenge-first-blog的博客

1
hexo new 'chenge-first-blog'

查看对应的文件夹，可以看到在source/_posts/下生成了一个chenge-first-blog.md文件，通过这个md文件去写博客

默认的内容是这样的：

1
2
3
4
5
6
---
title: chenge-first-blog
date: 2021-07-22 14:08:14
tags:
---
这里方开始编写正文

编写好之后，开始部署到github

生成html文件

1
hexo g

上传到github

1
hexo d

再次访问：https://LidianMeng.github.io/

可以看到编写的博客已经同步到github平台

五、小结

本文从0到1搭建了自己的个人博客，过程很详细，绝对的保姆级教程，看完就会！

关注我，我是典典~
未来继续给大家分享更多有趣的东西
拜拜，我们下期见！

觉得文章还不错，请我吃辣条鸭~爱你！！！