GitHub Pages+hexo搭建个人博客全教程之准备工作

撰写于 2018-07-10 修改于 2021-07-01 分类 搭建个人博客 标签 GitHub Pages+hexo / GitHub / Node.js / Git / Sublime Text 3 / Typora / MPic / Bmob / 域名 阅读数量：次

看到别人有自己的个人技术博客，自己也想要一个，于是走上了搭建（zhuang）个人(bi)博客之路。起初我是想要一个网页版的简历（我会放到个人博客网站），我是使用GitHub Pages+hexo实现的，也推荐大家使用该方法（主要是服务器免费）。本人半科班出道，安卓开发，有些前端基础，如果你也想拥有自己的博客网站，我想接下来的文章会让你少走弯路。

可以先看下我的网站效果:

你需要的准备工作：

Node.js

  1. 下载Node.js
  2. 安装Node.js
  3. Node.js环境配置
  • 下载Node.js

​ Node.js官网下载地址 看电脑系统来下载，我这是wind系统的，如果你是Mac的，那就下载对应版本。

  • 安装Node.js

    推荐一个网站 菜鸟教程 ，里面有很多的教程，有空学习一下。安装Node.js里面也有。

    步骤 1 : 双击下载后的安装包

    步骤 2: 勾选接受协议选项，点击 next（下一步） 按钮 :

    步骤 3 : Node.js默认安装目录为 “C:\Program Files\nodejs\” , 你可以修改目录，并点击 next（下一步）：

    步骤 4 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步） ，建议默认。

    步骤 5 :点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）。

    步骤6：安装过程， 点击 Finish（完成）按钮退出安装向导。

  • Node.js环境配置

    Node.js安装完毕后会自动在系统的path环境变量中配置了node.exe的目录路径，

    检测PATH环境变量是否配置了Node.js，按开始键（wind）+R—>输入”cmd” —> 输入命令”path”，输出结果有如下代码就好：

1
C:\Program Files\nodejs\

检查Node.js版本号并检查npm：开始键（wind）+R—>输入”cmd” —> 输入命令”node –version”，

安装Node.js时会自动给你安装了nmp，npm是Node.js的包管理工具（package manager）。出现版本号说明成功。

域名

  1. 注册域名
  2. 实名认证
  3. 域名解析

  • 域名注册

    我们先聊域名，如何拥用自己的域名，推荐去阿里云购买一个（买最便宜的），登录阿里云（没有号注册一个），你也可以不要域名，到时候你的域名就是GitHub仓库的路径。

全部导航—>产品—>域名与网站—>点击域名注册

阿里云域名注册位置

进去之后你会看到万网·阿里旗下品牌，在搜索框搜索你要买的域名，注意右边域名后缀选择.top，当然你可以选.com的（俺只买最便宜，穷）；加入清单购买，

  • 实名认证

    阿里云控制台—>域名与网站—>域名—>未实名认证域名—>输入相关信息进行认证，认证审核一般为一个工作日，我的当天就好了

域名实名认证

  • 域名解析

    域名解析是在域名认证审核成功之后做的，在认证期间，把GitHub仓库先创建了（跳过此处看GitHub仓库创建），解析的时候才有仓库路径。

域名解析

域名解析设置

参数说明：记录类型填CNAME，主机记录填@，有疑问点后面问好， 解析线路填默认，记录值填你的GitHub的仓库路径（没有GitHub仓库路径先去创建，往下看）。TLT值是缓存时间，随便选个就行。

GitHub

  1. GitHub Pages 为何物
  2. GitHub 创建仓库
  3. 上传HTML文件看效果
  4. 添加CNAME文件
  • GitHub Pages 为何物

GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

GitHub Pages Help

  • GitHub 创建仓库

GitHub创建仓库

Description是仓库描述，选填。

仓库创建好之后，在浏览器输入https://SmallRedSister.github.io（这是我自己的仓库路径，输入你自己的）就会看到网页，如果你的Description填了的话，就会看到描述内容。仓库路径有了，回到域名解析，把域名解析了。

  • 上传HTML文件看效果

    这步之后都需要使用Git，请确保你已经把Git部分弄好。如果你还没安装Git，请跳过往下看Git部分。

    第一步，将GitHub仓库克隆到本地，

    找到一个你想放入项目磁盘文件中右击选中Git Bash Here, git clone 你的GitHub仓库路径，后面加上.git。例如我的：

1
$ git clone  https://github.com/SmallRedSister/SmallRedSister.github.io.git

你会在你的文件中看到名为README文件，其中文件名是你的仓库路径名。

第二步：上传HTML文件，如果你的前端可以的话，自己写然后上传。在你clone下的文件夹下（SmallRedSister.github.io）新建index.html文件，内容你可以自己写，也可以用下面我提供的代码作为测试。

1
2
3
4
5
<!DOCTYPE html> 
<html> 
<body> <h1>这是我使用github pages搭建的个人站点。</h1>
</body>
</html>

接下来我们提交文件，在空白处右击选中Git Bash Here，依次输入如下代码，

1
2
3
4
$ git add .    //这个写好之后，按回车键再输入git commit -m "首次提交"命令
$ git commit -m "首次提交"   //这个写好之后，按回车键再输入git push命令
$ it push    //写好按回车键
  最后会提示你输入GitHub用户名和密码。

更新成功之后，你的个人博客网站算是有一点苗头了，你可以在浏览器输入你的GitHub仓库路径看效果。

1
$ https://SmallRedSister.github.io    //这是我的，请输入你的好吧

  • 添加CNAME文件

    添加CNAME文件是让你的GitHub仓库路径绑定你的域名，下次你搜索仓库路径时会自动跳到你的域名。

    这样你就有属于自己域名的个人博客网站。添加CNAME文件有两种方法，选一种你喜欢的就行。

    第一种：和使用git提交index文件一样

    新建CNAME文件，内容是你的域名，比如我的域名：liaichuan.top ，注意没有前缀https:// 也没有www，

    你不放心的话，请前往阿里云复制过来。提交程序和提交index文件一样，往回看，这里不重复。

    第二种方法：在GitHub仓库新建一个文件即可

Git

  1. 下载安装
  2. 初次安装 Git 配置Git
  3. 配置 SSH keys

Git 会根据用户的名字和邮箱来记录提交，那么设置你的名字和邮件地址：更多设置请移步Git官网教程

1
2
$ git config --global user.name "John Doe"  //你的GitHub名字
$ git config --global user.email "johndoe@example.com"   //你注册GitHub时使用的邮箱
  • 配置 SSH keys

安全起见，为了你的git和GitHub更好的通信链接，需要加入SSH Keys（密钥）。如果你不是第一次安装Git，那么检查一下是否已经存在SSH密钥，输入以下代码：

1
$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示：No such file or directory 说明没有。那生成新的 SSH Key吧！输入：

1
$ ssh-keygen -t rsa -C "你注册GitHub时使用的邮件地址"

然后会有提示：按回车就好，按一次没提示你输入密码的话，再连续按两次。总的按三次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Mechrev/.ssh/id_rsa):
Created directory '/c/Users/Mechrev/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Mechrev/.ssh/id_rsa.
Your public key has been saved in /c/Users/Mechrev/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:N3jVp9idNT3d1ipQMoOXbzpo5S6isMcsBpT3+NUSHHs MECHREV2018Z2@DESKTOP-JGL7KE2
The key's randomart image is:
+---[RSA 2048]----+
|         .+..    |
|       .. o= .  =|
|  .   . o.... .oO|
| o .   + E.ooo *=|
|. . o   S++oo +..|
|.  . . oo++. .   |
| ..o. .... .     |
|  oo+.. . .      |
| ..o.. . .       |
+----[SHA256]-----+    <回车就好>

Git会弹出一个对话框，让你输入GitHub的密码。之后会在用户目录下生成一个.ssh文件，打开本地 id_rsa.pub 文件，此文件里面内容为刚才生成的密钥，复制里面的全部内容。然后点击GitHub头像—>settings—>SSH and GPG keys—>new SSH key—->Title（随便填一个名字）—>Key（复制SSH密钥进去）—>Add SSH key。

配置SSH密钥

Sublime Text 3

神器不多说，谁用谁知道。Sublime Text官网 ，如果你已经拥用请跳过。进官网之后点Download，

点击下载的应用程序进行安装（Sublime Text Build 3176 x64 Setup），安装没咋好说的，后面那些添加插件呀什么的，自己找时间弄。

Typora

  1. 下载Typora
  2. 安装Typora

  • 下载Typora

    Typora是免费极简 Markdown 编辑器！好用的 MD 格式阅读器。我这篇博客就是用它写的（当然也用到ST）

    Typora官网 进入官网拉到底部，点击Windows。Typor是用来写博客的，后面专门写一篇博客详细介绍。

  • 安装Typora

    点击下载的 typora-setup-x64 应用程序进行安装。默认安装，要改的话就是安装路径。

MPic

  1. 下载MPic
  2. 安装MPic

  • 安装MPic

    MPic 2.2.1.3 解压压缩包，点击MPic.exe安装。

说明：MPic仅支持七牛云，七牛云我不是很了解，使用七牛云会有的麻烦，要实名认证，虽然是免费的，还要在里面存10钱，如果你嫌麻烦，那使用Bmob。

Bmob

Bmob这个你可以去了解一下，提前注册一个号，最好看下文档，后面写博客的时候我会详细介绍。我的图片不用七牛云存，用的是Bmob.

总结：这篇博客写到这吧！写不动了，下一篇我们说 GitHub Pages+hexo搭建个人博客全教程之hexo，

目录

  1. 可以先看下我的网站效果:
    1. 你需要的准备工作：
    2. Node.js
    3. 域名
    4. GitHub
    5. Git
    6. Sublime Text 3
    7. Typora
    8. MPic
    9. Bmob
全站博客共21.6k字(●'◡'●)ﾉ♥
Site by SmallRedSister using Hexo & Random
© 2018-2024 | 载入天数...载入时分秒... 总访问量次 | 访客数人次

小红妹个人技术博客网站

Hide