安装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搭建自己的个人博客网站的更多相关文章

  1. 使用Hexo+Github搭建属于自己的博客(进阶)

    主题的配置:这里以NexT主题作为题材 1.安装NexT,在其文件夹中鼠标右键,点击Git Base Here.输入命令:git clone https://github.com/iissnan/he ...

  2. 使用Hexo+Github搭建属于自己的博客(基础)

    前言 hexo是一个台湾人做的基于Node.js的静态博客程序,优势是生成静态文件的速度非常快,支持markdown, 我最终选定它的原因是它速度快而且不容易出错,并且可以一键部署到github或者其 ...

  3. 使用Hexo+Github搭建属于自己的博客

    工具:Visual Studio Code/MarkdownPad技术:Hexo+Github 创建Github项目 Github账户注册和新建项目,项目必须要遵守格式:账户名.github.io,不 ...

  4. 使用Hexo & Github,搭建属于自己的博客

    经过在网上各种找资料,踩过各种坑,终于搭建好了hexo,直接与gitbub一起使用,搭建起自己的免费的博客. 关于Hexo Hexo是一款基于Node.js的静态博客框架. Hexo特性 风一般的速度 ...

  5. HEXO+Github,搭建属于自己的博客

    摘录自:http://www.jianshu.com/p/465830080ea9 1. github的准备 账号 密码 建立Repository建立与你用户名对应的仓库,仓库名必须为[your_us ...

  6. Hexo+Github 搭建属于自己的博客(Mac下安装 其他操作系统大同小异)

    安装前提 参考博客:http://blog.csdn.net/gdutxiaoxu/article/details/53576018#t5(写的很好,不用看我的了.....) 这篇:http://ww ...

  7. github+hexo+themes搭建简易个性主题博客

    0x00  install Node.js and git 安装Node.js:http://www.runoob.com/nodejs/nodejs-install-setup.html 安装git ...

  8. Hexo+GitHub+Netlify一站式搭建属于自己的博客网站

    喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...

  9. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

随机推荐

  1. DBContext基础查询

    https://www.cnblogs.com/gosky/p/5752001.html 遍历所有实体 //遍历所有学生 DBSet using (var db = new Entities()) { ...

  2. kali linux2019.4安装启动后中文乱码

    1.鼠标右键找到黑框框打开终端 2.终端执行后重启,乱码解决. sudo apt-get install ttf-wqy-zenhei

  3. 用fgets()和fputs()代替gets()和puts()

    gets()和puts不安全,有些平台会报错,如pat. gets输入字符串时,不进行数组下标的检查,也就是说当你的数组长度是n时,输入超过该长度的字符串的时候,编译不会出错,但是运行的时候会出现数组 ...

  4. NOIP做题练习(day4)

    A - 同花顺 题面 题解 30分做法 爆搜即可. 60分做法 去重+贪心. 100分做法 去重+贪心后,我们要寻找一段符合条件的最长同花上升子序列 \(L\),\(n-L\) 即为所求的答案. 首先 ...

  5. webpack4.41.0配置一(基础配置webpack文件,入口出口,实现打包)

    1.查看node.js版本.npm版本和webpack版本(使用webpack4时,请确保node.js的版本>=8.9.4) 2.我先重新卸载了webpack和webpack-cli(全局) ...

  6. Windows下PHP安装 Imagick 扩展

    1.下载拓展下载地址一: http://windows.php.net/downloads/pecl/releases/imagick/下载地址二: https://pecl.php.net/pack ...

  7. HTML5学习(1)简介

    HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. 什么是 HTML5? HTML5 ...

  8. mybatis报错:A query was run and no Result Maps were found for the Mapped Statement

    转自:https://blog.csdn.net/u013399093/article/details/53087469 今天编辑mybatis的xml文件,出现如下错误: 程序出现异常[A quer ...

  9. window10 上的mysql8.0.13的数据库服务丢失后,找回方法

    1.由于mysql8 的 话是默认有一个配置文件的,所以在执行 初始化mysql8 mysqld --initialize #执行这个的原因是:因为之前使用的是Mysql8中自带的那个默认的配置文件 ...

  10. Linux中内容查看命令"大PK"

    众所周知linux中命令cat.more.less均可用来查看文件内容,当然还有我们"非主流"的vim以及使用较少的head.tail.tac. 下面我将介绍各种命令的用法及对比. ...