手把手教你使用Hexo+GitHub搭建本身的我的博客网站

安装nodejs环境

这个直接搜索安装便可,安装完成以后,经过以下命令检测环境变量是否安装成功:java

λ node -v
# 输出版本号
v12.13.1
复制代码

正确输入版本号便可。node

安装cnpm

cnpm是淘宝镜像,能够加快依赖的安装速度git

npm install cnpm -g --registry=https://registry.npm.taobao.org
 # 输出
C:\Users\xxxxx\AppData\Roaming\npm\cnpm -> C:\Users\xxxxx\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.0
added 680 packages from 933 contributors in 24.882s
复制代码

其余

Git、GitHub就很少说了github

安装 Hexo

cnpm install -g hexo-cli
复制代码

能够经过以下命令检查是否安装成功shell

λ hexo -v

"node"  "C:\Users\xxxxxx\AppData\Roaming\npm\\node_modules\hexo-cli\bin\hexo" -v
hexo-cli: 3.1.0
os: Windows_NT 10.0.18362 win32 x64
node: 12.13.1
v8: 7.7.299.13-node.16
uv: 1.33.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.39.2
napi: 5
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1
复制代码

建立本地博客

hexo init gitpage
复制代码

出现下面提示表示初始化成功了npm

执行完以后目录内容api

image

进入gitpage目录,执行以下命令浏览器

cd gitpage
cnpm install
复制代码

这样,hexo就安装完成了。bash

Hexo 基本用法

启动

hexo server 
# or
hexo s
复制代码

经过浏览器访问http://localhost:4000便可查看效果:服务器

新建博客

hexo new "My First Post"
复制代码

在source_posts 路径下,会有一个 My-First-Post.md 的文件。 编辑这个文件,而后保存。

回到命令行,输入

hexo g

复制代码

建立静态文件

启动服务器,查看效果

hexo server

复制代码

启动以后,便可看到本身新建立的这篇文章。

部署到GitHub

首先在GitHub建立一个仓库,仓库名叫"<username>.github.io"。复制仓库地址。打开gitpage目录下的_config.yml 文件, 找到 #Deployment,填入如下内容:

deploy:  
	  type: git  
	  repository: https://github.com/Happy4Java/happy4java.github.io.git
	  branch: master

复制代码

保存,而后在命令行执行以下语句:

cnpm install hexo-deployer-git --save

复制代码

执行完以后,便可执行部署命令:

hexo d

复制代码

可能须要输入github的帐号密码,输入以后便可部署完成。

查看效果

访问https://happy4java.github.io便可查看到效果。

使用 Next 主题

进入gitpage文件夹下的themes文件夹,执行

git clone https://github.com/theme-next/hexo-theme-next.git

复制代码

这样,该主题的文件就所有克隆到 gitpage\themes\next 下面。

修改博客配置文件

  • 打开 _config.yml配置文件
  • 找到 theme:
  • 把 Hexo 默认的 lanscape 修改为 hexo-theme-next 。
  • 找到 # Site,添加博客名称,做者名字等。
  • language 后面填入 en 或者 zh-CN,选择英文或者中文。
  • 找到 # URL, 填入 url。好比 url: https://happy4java.github.io

从新生成部署

hexo g
hexo d

复制代码

访问https://happy4java.github.io便可查看效果

原创声明

本文为【Happyjava】的原创,欢迎转载,但需注明出处