Windows下搭建Node.js + Github个人博客

发表于 | 分类于 | 阅读次数

1.搭建Node.js环境

Node.js下载地址

安装过程其实并不复杂，执行安装文件后，一直选择 next 就可以了，至于安装路径，根据自己的情况选。下面是步骤图，版本不一样，图可能有些不一样。

安装完成后，检查组件是否安装成功。在命令提示符中输入

1
2
node -v
npm -v

出现相应的版本信息就表示安装成功。

2.搭建Git环境

Git下载地址

git的安装过程同样很简单，不需要修改什么地方。下载是安装过程图。

安装完成后，检查组件是否安装成功。在命令提示符中输入

1
git --version

出现相应的版本信息表上安装成功。

3.注册github账号

如果已经有了github账号就不用注册了，直接创建仓库就好。

注册账号

输入账号，邮箱与密码，点击注册

注册成功后进入这个页面，选择 free， 点击continue

进入这个页面，可以不选，直接 submit

认证邮箱，登录邮箱确认注册信息，确认之后就可以开始创建仓库了

4.创建仓库

选择 star a project

仓库名与github账号名对应。规则：name.github.io其，他的可以选择性填写 create repository

开启gh-pages功能，点击右上角的 Settings

向下拖动到GitHub Pages，如下图，找到Source 选择分枝并保存，系统会提示name.github.io可以访问了。可以访问后github的配置就结束了。

5.安装Hexo

选择一个地方创建文件夹，存放Hexo。进入Hexo文件夹，右键，选择git bash，输入

1
npm install -g hexo

出现WARN可不用理会，继续输入以下命令

1
npm install hexo --save

安装完成后，输入命令，验证是否安装成功

1
hexo -v

6.本地运行Hexo

  • 初始化
1
hexo init
  • 安装生成器
1
npm install
  • 运行Hexo
1
2
hexo -g
hexo s

打开浏览器，输入localhost:4000,就可以在本地看到个人博客了

如果浏览器一直没有加载出内容，有可能是端口被占用了，改个端口试试

1
hexo s -p 5000

7.将Hexo与Github page 联系起来

配置Git个人信息

如果之前已近配置过个人信息就不用配置了

1
2
git config --global user.name "GitHub用户名"
git config --global user.email "登录邮箱"

生成密钥

  • 检查是否已有SSH Key
1
cd ~/.ssh

提示：No such file or directory 说明你是第一次使用git

  • 生成新的SSH Key
1
ssh-keygen -t rsa -C "邮箱"

系统会要求你输入密码，可以输入密码，也可以为空。为空提交项目时则不用输密码

添加SSH Key到Github

在本地设置SSH Key后，需要添加到Github上，已完成SSH连接的设置。

  • 打开本地C:\用户\username.ssh\id_rsa.pub文件（username是你的用户名）。这个文件就是之前生成的SSH Key，默认是隐藏文件夹，需设置显示隐藏文件夹。复制文件内容

  • 登录github网站，点击右上角用户的下三角下的Settings—->SSH Public keys—->add another public keys。

  • 将复制的密钥粘贴到文本框中，点击add key 就可以了。

  • 测试

输入命令

1
ssh -T git@github.com

可能会要求输入yes或no，输入yes就好，然后就会出现成功的信息。

8.配置Deployment

在_config.yml文件中，找到Deployment, 然后如下修改

1
2
3
4
deploy:
  type: git
  repo: https://github.com/name/name.github.io.git
  branch: master

9.添加Hexo git插件

1
2
npm install hexo-deployer-git --save
hexo deploy(可以缩写成d)

未安装此插件,在执行 hexo delop时会提示 ERROR Deployer not found: git

到这基本配置应该就结束了，至于主题就选择自己喜欢的去配就好了。如果有什么不对的地方可以指出来，就酱(≧∀≦)ゞ

图的顺序不知道有没有搞错(:зゝ∠)