“妈妈式”hexo+github搭建个人博客

“妈妈式”搭建个人博客分享,带图易懂,码字不易,如有任何遗漏错误之处,望看官指明,好使鄙人加以改进!还请各位看官多多担待,谢谢XD!

文章目录

  • 一、安装Node.js
    • 1、从官网下载并安装Node.js
    • 2、使用下面的命令行代码检查Node.js的安装
    • 3、使用下面的命令行代码检查npm的安装
  • 二、安装Git
    • 1、从官网下载并安装Git
    • 1、使用下面的命令行代码检查Git的安装
  • 三、安装Hexo
    • 1、使用下面的命令行代码下载Hexo
    • 2、使用下面的命令行代码检查Hexo的安装
  • 四、初始化Hexo
    • 1、创建一个新的空文件夹作为博客的根目录
    • 2、初始化该空文件夹为hexo博客的根目录
    • 附:一键初始化
  • 五、个人博客页面生成及预览
    • 1、使用下面的命令行代码生成博客静态页面
    • 2、使用下面的命令行代码启动服务器
    • 3、本地预览静态博客页面
  • 六、部署博客页面至远端
    • 1、创建一个Github账户
    • 2、新建一个Github仓库
    • 3、使用下面的命令行代码生成SSH密钥
    • 4、从本地获取密钥
    • 5、将密钥粘贴至Github
    • 6、修改Hexo配置文件中deploy
    • 7、部署至Github
    • 8、访问博客
  • 附:如何使用命令行
    • 1、按住快捷键 Win+R 在电脑屏幕左下角出现运行提示
    • 2、运行界面
    • 3、键盘敲下代码指令以实现命令

一、安装Node.js

1、从官网下载并安装Node.js

点击此处超链接前往官网下载 Node.js官方网站

“妈妈式”hexo+github搭建个人博客_第1张图片

2、使用下面的命令行代码检查Node.js的安装

node -v 

“妈妈式”hexo+github搭建个人博客_第2张图片

3、使用下面的命令行代码检查npm的安装

注:在安装Node.js的同时,由于npm的安装已经集成在了Node.js中,所以会直接安装好Node.js的包管理工具npm,我们可以先不深入了解npm是什么(当然,这不否认有兴趣的朋友可以自己去查阅资料了解什么是npm),只是在搭建博客过程中我们需要使用到它,所以需要检查它是否安装成功。

npm -v

“妈妈式”hexo+github搭建个人博客_第3张图片


二、安装Git

1、从官网下载并安装Git

点击此处超链接前往官网下载 Git官方网站

1、使用下面的命令行代码检查Git的安装

git --version

“妈妈式”hexo+github搭建个人博客_第4张图片


三、安装Hexo

1、使用下面的命令行代码下载Hexo

npm install -g hexo-cli

“妈妈式”hexo+github搭建个人博客_第5张图片

2、使用下面的命令行代码检查Hexo的安装

hexo -v

“妈妈式”hexo+github搭建个人博客_第6张图片


四、初始化Hexo

1、创建一个新的空文件夹作为博客的根目录

“妈妈式”hexo+github搭建个人博客_第7张图片

2、初始化该空文件夹为hexo博客的根目录

我们可以使用命令行、git bash等,这里我演示git bash。

  • 进入该空文件夹

  • 打开git bash
    “妈妈式”hexo+github搭建个人博客_第8张图片
    “妈妈式”hexo+github搭建个人博客_第9张图片

  • 使用下面的命令行代码初始化

    hexo init
    

    “妈妈式”hexo+github搭建个人博客_第10张图片

附:一键初始化

我们也可以简化命令,直接创建并初始化一个博客根目录

  • 在E盘下打开git bash

    “妈妈式”hexo+github搭建个人博客_第11张图片

  • 运行命令
    “妈妈式”hexo+github搭建个人博客_第12张图片
    “妈妈式”hexo+github搭建个人博客_第13张图片

这样我们就完成了博客的搭建。

上述演示中,应该要注意的是

  • 初始化的文件夹的路径是随意的:你可以在你的D盘,E盘,甚至F盘中创建并初始化一个文件夹为hexo根目录。
  • 初始化的文件夹也是随意的:例如我可以选择我在E盘下创建的Myblog文件夹初始化,也可以选择在Myblog文件夹中再创建一个子文件夹来初始化作为hexo根目录

五、个人博客页面生成及预览

1、使用下面的命令行代码生成博客静态页面

hexo generate

“妈妈式”hexo+github搭建个人博客_第14张图片

2、使用下面的命令行代码启动服务器

hexo server

“妈妈式”hexo+github搭建个人博客_第15张图片

3、本地预览静态博客页面

浏览器输入http://localhost:4000预览我们的博客页面


六、部署博客页面至远端

以上我们预览的博客只能是我们自己访问,然而,我们建立博客的意图当然不只是为了自己访问,而是希望能被更多人看到,互相学习交流,所以现在我们来实现博客的部署,从而让更多人能够看到我们的博客。(这里我将以Github Pages实现,当然,这只是其中一种,还有多种方法有兴趣的朋友可以自行深入了解)

1、创建一个Github账户

如何创建github仓库我就暂时不赘述了,如果有需要请留言给我,日后也会补齐。

2、新建一个Github仓库

“妈妈式”hexo+github搭建个人博客_第16张图片
“妈妈式”hexo+github搭建个人博客_第17张图片

3、使用下面的命令行代码生成SSH密钥

git config --global user.name "yourname"
git config --global user.email "youremail"
ssh-keygen -t rsa -C "youremail"

注:可使用下面的命令行代码检查账户邮箱输入

git config user.name
git config user.email

“妈妈式”hexo+github搭建个人博客_第18张图片

之后一直按回车键就可以
“妈妈式”hexo+github搭建个人博客_第19张图片

“妈妈式”hexo+github搭建个人博客_第20张图片

直到出现下图,便成功生成ssh密钥

“妈妈式”hexo+github搭建个人博客_第21张图片

4、从本地获取密钥

本地路径为:C/Users(用户)/yourname(你的用户名)/.ssh/id_rsa.pub

“妈妈式”hexo+github搭建个人博客_第22张图片
“妈妈式”hexo+github搭建个人博客_第23张图片

5、将密钥粘贴至Github

“妈妈式”hexo+github搭建个人博客_第24张图片
“妈妈式”hexo+github搭建个人博客_第25张图片
“妈妈式”hexo+github搭建个人博客_第26张图片

注:使用使用下面的命令行代码检查密钥的上传

ssh -T [email protected]

“妈妈式”hexo+github搭建个人博客_第27张图片

6、修改Hexo配置文件中deploy

“妈妈式”hexo+github搭建个人博客_第28张图片

使用下面的命令行代码安装hexo-deployer-git

npm install hexo-deployer-git --save

7、部署至Github

hexo generate
hexo deploy

“妈妈式”hexo+github搭建个人博客_第29张图片

8、访问博客

浏览器输入https://yourname.github.io预览你的博客页面

“妈妈式”hexo+github搭建个人博客_第30张图片


附:如何使用命令行

1、按住快捷键 Win+R 在电脑屏幕左下角出现运行提示

2、运行界面

“妈妈式”hexo+github搭建个人博客_第31张图片

3、键盘敲下代码指令以实现命令

你可能感兴趣的:(博客)