手把手教你使用Hexo+GitHub搭建自己的个人博客网站
安装nodejs环境
这个直接搜索安装即可,安装完成之后,通过如下命令检测环境变量是否安装成功:
λ node -v
# 输出版本号
v12.13.1
正确输入版本号即可。
安装cnpm
cnpm是淘宝镜像,可以加快依赖的安装速度
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就不多说了
安装 Hexo
cnpm install -g hexo-cli
可以通过如下命令检查是否安装成功
λ 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
出现下面提示表示初始化成功了

执行完之后目录内容

进入gitpage目录,执行如下命令
cd gitpage
cnpm install
这样,hexo就安装完成了。
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】的原创,欢迎转载,但需注明出处
手把手教你使用Hexo+GitHub搭建自己的个人博客网站的更多相关文章
- 使用Hexo+Github搭建属于自己的博客(进阶)
主题的配置:这里以NexT主题作为题材 1.安装NexT,在其文件夹中鼠标右键,点击Git Base Here.输入命令:git clone https://github.com/iissnan/he ...
- 使用Hexo+Github搭建属于自己的博客(基础)
前言 hexo是一个台湾人做的基于Node.js的静态博客程序,优势是生成静态文件的速度非常快,支持markdown, 我最终选定它的原因是它速度快而且不容易出错,并且可以一键部署到github或者其 ...
- 使用Hexo+Github搭建属于自己的博客
工具:Visual Studio Code/MarkdownPad技术:Hexo+Github 创建Github项目 Github账户注册和新建项目,项目必须要遵守格式:账户名.github.io,不 ...
- 使用Hexo & Github,搭建属于自己的博客
经过在网上各种找资料,踩过各种坑,终于搭建好了hexo,直接与gitbub一起使用,搭建起自己的免费的博客. 关于Hexo Hexo是一款基于Node.js的静态博客框架. Hexo特性 风一般的速度 ...
- HEXO+Github,搭建属于自己的博客
摘录自:http://www.jianshu.com/p/465830080ea9 1. github的准备 账号 密码 建立Repository建立与你用户名对应的仓库,仓库名必须为[your_us ...
- Hexo+Github 搭建属于自己的博客(Mac下安装 其他操作系统大同小异)
安装前提 参考博客:http://blog.csdn.net/gdutxiaoxu/article/details/53576018#t5(写的很好,不用看我的了.....) 这篇:http://ww ...
- github+hexo+themes搭建简易个性主题博客
0x00 install Node.js and git 安装Node.js:http://www.runoob.com/nodejs/nodejs-install-setup.html 安装git ...
- Hexo+GitHub+Netlify一站式搭建属于自己的博客网站
喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
随机推荐
- ASP.NET + MVC5 入门完整教程七 -—-- MVC基本工具(上)
https://blog.csdn.net/qq_21419015/article/details/80474956 这里主要介绍三类工具之一的 依赖项注入(DI)容器,其他两类 单元测试框架和模仿工 ...
- Pacemaker+ISCSI实现Apache高可用-配置
一.配置文件系统 任意节点用ISCSI的共享磁盘创建LVM node1 pvcreate /dev/sdb vgcreate my_vg /dev/sdb lvcreate -L 1G -n web_ ...
- 用git无法连接github的解决方法
如果要從 GitHub 存取 Git 儲存庫,建議還是多採用 SSH 與 HTTPS 通訊協定最為穩定可靠,因此我的替代方案就是設定 Git 的全域設定值 ( –global ),預設將所有 git: ...
- [Note]后缀自动机
后缀自动机 代码 #include <cstdio> #include <algorithm> #include <cstring> const int M = 1 ...
- 上传图片时使用crop进行裁剪
上传图片时,往往需要对图片进行裁剪. 实现方法为: 1.引入crop.css body{background:#}.upload-container{position:absolute;left:%; ...
- 212. 单词搜索 II
Q: 给定一个二维网格 board 和一个字典中的单词列表 words,找出所有同时在二维网格和字典中出现的单词. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中"相邻" ...
- SQL查询语句的执行
执行过程 连接器 - 管理连接,权限验证 查询缓存 - 命中缓存直接返回结果 分析器 - 词法分析 ,语法分析 优化器 - 分析执行计划,选择最优的执行计划 执行器 - 操作存储引擎接口,返回结果 不 ...
- .NetCore中使用HttpHeader
httpContextAccessor.HttpContext.Request.Headers[key]; 可以获取一个StringValues,需要注意调试中显示的Headers的key,并不是实际 ...
- Bugku-CTF之login3(SKCTF)(基于布尔的SQL盲注)
Day41 login3(SKCTF)
- AcWing 240. 食物链
#include <iostream> using namespace std; ; int n, m; int p[N], d[N]; //p是baba,d是距离 int find(in ...