Hexo博客搭建(基础篇)

一、介绍

1.1 概述

  Hexo基于Node.js的快速且高效的静态博客程序,可方便地生成静态网页托管在Github和Coding上,使用Markdown(或其它渲染引擎)解析文章,并且可以在几秒之内渲染靓丽的主题生成静态网页。

1.2 优点

  • 不需要:服务器、域名、github提供托管服务(免费)
  • 不用自己写XML、Hexo提供了很多开源博客模板
  • 便于维护更新,更换风格直接更换模板

二、操作过程

2.1 安装环境

2.1.1 Node
2.1.2 Git
2.1.3 Hexo

# cmd下执行
》》npm install hexo-cli -g

2.1.4 测试安装结果

# cmd下执行查看
》》node -v
》》git --version
》》hexo -v

在这里插入图片描述
(如果不显示可能是环境变量没有配置好,去安装目录查看应用的exe文件路径配置下环境变量即可!其它原因没配好欢迎留言!)

2.2 本地运行

目的:为了本地搭建并测试博客状态,以后的所有关于网站配置的操作都会在此初始化的目录下运行。

》》创建文件夹用于存放Hexo,也就是博客目录(博主创建在C:\,取名:Kevin’sBlog)
# hexo建立网站所需文件(初始化)
》》右击使用git bash操作界面(避免处理其它的兼容错误,cmd下也可以使用但有时候缺少文件!)
在这里插入图片描述
》》hexo init
# 安装依赖包
》》npm install

## 本地启动 / 调试
# 等同于hexo generate,生成静态文件
》》hexo g
# 等同于hexo server,本地启动服务运行
》》hexo s
在这里插入图片描述
》》浏览器访问localhost:4000,页面显示如下证明本地搭建完成!
在这里插入图片描述

2.2 远程运行

2.2.1 注册github账户
2.2.2 github上设置远程库

》》登录github账户并点击“+”号,选择新存储库
在这里插入图片描述
》》在"Repository name"下输入存储库名称(这个名称就是你的域名:<RepositoryName>.github.io)
在这里插入图片描述

Tips:这里一定要用你的Github用户名.github.io创建,即上方绿色方框中的格式(我的github用户名为:KevinMahone),假如Repository name非为:“KevinMahone.github.io”创建,而是用的“Kevin’sBlog”那么浏览器访问"https://KevinsBlog.github.io"的时候会出现404错误,并不是没有部署成功,而是部署在了:https://KevinMahone.github.io/Kevin’sBlog.github.io (访问域名不易输入),因此为了避免麻烦,那么就需要和用户名保持一致!

》》编辑本地Hexo目录下文件:_config.yml(在最后添加你的远程仓库)

deploy:
  type: git
  repository: [email protected]:KevinMahone/KevinMahone.github.io.git
  branch: master

在这里插入图片描述

Tips:所有的配置 " : " 后边都需要带空格,否则执行本地测试直接失败

2.2.3 配置Github的SSH
2.2.4 安装部署工具

》》npm install hexo-deployer-git -save

git bash 下会有些慢但是进程在后台运行,稍等片刻
在这里插入图片描述

2.2.5 上传到远程仓库

# 生成静态文件
》》hexo g
# 部署到Github
》》hexo d

2.3 查看部署

》》登录Github查看文件已经上传成功
在这里插入图片描述
》》浏览器输入我们的域名访问我们博客查看是否成功:
在这里插入图片描述

Tips1:没有成功需要等待几分钟,因为Github需要部署会儿
Tips2:若10分钟后刷新页面仍然没有反应在>存储库的设置 >GitHub Pages处查看网站是否发布,没有的话下方蓝色位置选择下即可

在这里插入图片描述
在这里插入图片描述
》》到此我们博客初级搭建完成!

发布了111 篇原创文章 · 获赞 104 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/Aaron_Miller/article/details/90370664