Hexo是一个快速,简洁高效的博客框架

1:Hexo 简历

官方文档开发: https://hexo.io/zh-cn/docs/
Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

  • 第一部分:hexo的初级搭建还有部署到github page上,以及个人域名的绑定。
  • 第二部分:hexo的基本配置,更换主题,实现多终端工作,以及在coding page部署实现国内外分流
  • 第三部分:hexo添加各种功能,包括搜索的SEO,阅读量统计,访问量统计和评论系统等。

2:Hexo 的搭建步骤

  1. 安装 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目
  2. 安装 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
  3. 安装 Hexo 快捷高效的博客框架
  4. GitHub 创建个人仓库 GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管
  5. 生成 SSH 添加 到 GitHub
  6. 将 hexo 部署到 GitHub
  7. 设置个人域名
  8. 发布文章

3:安装 Git

Git 教程
Git是目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的hexo博客文章,上传到GitHub的工具。Git非常强大,我觉得建议每个人都去了解一下。廖雪峰老师的Git教程写的非常好,大家可以了解一下。

  • windows:到git官网上下载,Download git,下载后会有一个Git Bash的命令行工具,以后就用这个工具来使用git。
  • linux:对linux来说实在是太简单了,因为最早的git就是在linux上编写的,只需要一行代码

git 官方 MacBook 直接Download下载安装 快捷 https://git-scm.com/

sudo apt-git install git

安装完后用命令敲一下确保已安装 git
在这里插入图片描述

2:安装 Node.js Chrome V8 引擎的 JavaScript 运行环境。

Hexo是基于nodeJS编写的,所以需要安装一下nodeJs和里面的npm工具。
windows:nodejs选择LTS版本就行了
Macbook安装:
在这里插入图片描述
安装完成后,打开命令行

node -v
npm -v 

在这里插入图片描述检查一下有没有安装成功
顺便说一下,windows在git安装完后,就可以直接使用git bash来敲命令行了,不用自带的cmd,cmd有点难用

3:安装 Hexo 快捷高效的基于 Node.js 的静态的博客框架

前面git和nodejs安装好后,就可以安装hexo了,你可以先创建一个文件夹blog,然后cd到这个文件夹下(或者在这个文件夹下直接右键git bash打开)。

npm install -g hexo-cli

依旧用 hexo -v 检查确保一下版本
然后记得切换 root 用户在这里插入图片描述创建目录 我们cd 到该 blog 目录完成最终的hexo 初始化

ls 显示该目录内容
cd 进入到该目录下
mkdir blog  创建 blog 目录
pwd  显示在该目录中
sudo hexo init 将我下载的 hexo 博客框架 完成最终的初始化

在这里插入图片描述最后在最后显示 : INFO Start blogging with Hexo! 就 OK 了 不过 下载可能有点慢 因为要去 gitHub 去下载镜像
要处理好 就要去指定国内镜像.
完成之后 ls -l 就会有这些内容那么就初始化成功了!
在这里插入图片描述
新建完成后,指定文件夹目录下:

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题
  • ** _config.yml: 博客的配置文件**
hexo g
hexo server 或 hexo s 启动 然后他就会在 在 http://localhost:4000 的端口启动 
然后去浏览器访问就可以看到内容了

打开hexo的服务,在浏览器输入localhost:4000就可以看到你生成的博客了。
大概长这样:默认主题样子
使用ctrl+c可以把服务关掉。

4:GitHub 创建个人仓库

首先,你先要有一个GitHub账户,去注册一个吧。
注册完登录后,在GitHub.com中看到一个New repository,新建仓库
创建一个和你用户名相同的仓库,后面加.github.io,只有这样,将来要部署到GitHub page的时候,才会被识别,也就是xxxx.github.io,其中xxx就是你注册GitHub的用户名。我这里是已经建过了。
点击create repository。
在这里插入图片描述

5:生成 SSH 添加到 GitHub

回到你的 git bash 中

git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。
可以用以下两条,检查一下你没有输对

git config user.name
git config user.email

然后创建 SSH,一路回车

ssh-keygen -t rsa -C "youremail"

在这个时候他会告诉你已经生成了.ssh 的文件夹,在你电脑中找到这个文件夹.
ssh,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。
而后在GitHub的setting中,找到SSH keys的设置选项,点击New SSH key
把你的id_rsa.pub里面的信息复制进去.

在最后的时候.在 gitbash 中,查询是否成功

6:将 hexo 部署到 GitHub 上

这一步,我们就可以将hexo和GitHub关联起来,也就是将hexo生成的文章部署到GitHub上,打开站点配置文件 _config.yml,翻到最后,修改为
YourgithubName就是你的GitHub账户

1:首先到cd 到 blog ls
2:_config.yml 直接用命令行 vim _config.yml  然后按住 i 进入 编写模式
3:直接到最下面把修改这里面的参数指定发布都 git 用户 
4:修改:deploy:
  type: git
  repo: https://github.com/自己在 github 建的仓库的地址值 .github.io.git
  branch: master
5:当我们要修改里面的要保存退出该模式 我们按一下  esc 然后:按住 shift 接着 wq! 强制保存退出 source  ._config.yml就行了

这个时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然后

hexo d 发布到 git 上
在这里插入图片描述

hexo clean
hexo generate
hexo deploy 

其中 hexo clean清除了你之前生成的东西,也可以不加。
hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写
hexo deploy 部署文章,可以用hexo d缩写
注意deploy时可能要你输入username和password。

得到下图就说明部署成功了,过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了!

==7:Hexo 更换主题

在我 hexo 安装和初始化 它就会去下载默认的 landscape 主题不好看那么在官方网站的主题中,自己选择你喜欢的主题进行修改就行了 hexo 官方提供的主题库 https://hexo.io/themes/
在这里插入图片描述

每当我们去做修改其实都是围绕着 创建的 blog 来做更改 如果你在该目录出现问题 直接可以把 blog 目录干掉冲新去
mkdir blog 重新去 sudo hexo init 初始化就行了
那么我们接下来就是git clone 克隆一个静态好看的主题到 themes 目录修改 _config.yml配置文件

1:git clone https://github.com/klugjo/hexo-theme-anodyne themes/anodyne
													   2:themes存档默认主题的目录/git clone 的主题名称

在这里插入图片描述然后去修改 _config.yml 配置信息 退出 esc 按住 shife wq! 保存退出 source _config.yml 重新刷新生效
在这里插入图片描述
返回到 blog目录下然后就敲命令三条命令

hexo clean
hexo generate
hexo deploy 
hexo server 

hexo s 启动 hexo 的自带的 Tomcat 服务器 去浏览器查看 localhost:4000 显示页面 完完成成的 Ok 了…

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值