Hexo-NexT搭建个人博客(一)

Hexo 是一个快速、简洁且高效的静态站点生成框架,它基于 Node.js 。 它有以下特点:

  •  超快速度

    Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。


  •  支持Markdown

    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。


  •  一键部署

    只需一条指令即可部署到Github Pages,或其他网站


  •  丰富的插件

    Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。

基于 Hexo 这个优秀的博客框架,很多优秀的开发者奉献出了它们基于 Hexo 开发的主题
NexT 因其 精于心,简于形 的风格,一直被广大用户所喜爱。

安装

安装 Hexo 只需几分钟时间,若你在安装过程中遇到问题或无法找到解决方式,请提交问题,我会尽力解决你的问题。

安装前提

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

Node.js
Git

如果您的电脑中已经安装上述必备程序,那么恭喜你!接下来只需要使用 npm 即可完成 Hexo 的安装。

1
$ npm install -g hexo-cli

如果你的电脑中尚未安装所需要的程序,请根据以下安装指示完成安装。

安装 Git

  • Windows:下载安装 git 。 Download Now
  • Mac:使用 HomebrewMacPorts 或下载 安装程序 安装
  • Linux(Ubuntu,Debian):sudo apt-get install git-core
  • Linux(Fedora,Red Hat,CentOS):sudo yum install git-core

安装 Node.js

安装 Node.js 的最佳方式是使用 nvm。(nvm:Node Version Manager)
windows 下使用 nvm 请看这里: nvm-windows ,首先需要下载安装 nvm 。 Download Now
windows下安装完nvm以后,我们可以打开命令行中执行命令

1

2
$ nvm

$ nvm install latest

执行完以后,重启命令行,执行命令 node -v ,如果出现版本号,那么 Node.js 就安装成功了。

如果没有安装成功,那可能就是墙的原因。建议下载 Node.js 直接安装。 Download Now

安装 Hexo

有了 Node.js ,我们可以使用 npm 安装 Hexo。

1
$ npm install -g hexo-cli

安装 Hexo 完成后,我们首先需要为我们的项目创建一个指定文件夹(例如我在 D 盘目录下创建了一个文件夹 blog 。D:blog ),在指定文件夹中执行下列命令, Hexo 将会在指定文件夹中新建所需要的文件。

1
$ hexo init

等待安装,安装完成后,指定文件夹 的目录如下:

1

2

3

4

5

6

7

8
.

├── _config.yml

├── package.json

├── scaffolds

├── source

|   ├── _drafts

|   └── _posts

└──

我们继续执行命令

1

2
$ hexo g

$ hexo s --debug

Hexo 将 source 文件夹中除 posts 文件夹之外,开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件夹会被拷贝过去。
这个时候,我们在浏览器中访问 http://localhost:4000/ ,就可以看到基于 Hexo 的默认主题的原型:

安装 NexT 主题

大专栏  Hexo-NexT搭建个人博客(一) NexT 主题">下载 NexT 主题

依旧是在当前目录下,使用 Git checkout 代码:

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

等待下载完成。

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml 。其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。
我们约定,将前者称为 站点配置文件,后者称为 主题配置文件

启用 NexT 主题

打开 站点配置文件 ,找到 theme 字段,并将其值更改为 next 。
到此, NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前,我们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先启动 Hexo 本地站点,并开启调试模式(即加上 --debug),整个命令是 hexo s --debug。在服务启动的过程,注意观察命令行输出是否有任何异常信息。当命令行输出中提示:

1
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000/ ,检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse


现在,我们已经成功安装并启用了 NexT 主题。

关于更多基本操作和基础知识,请查阅 HexoNexT 官方文档.

总结

本地调试步骤

三部曲:

1

2

3
$ hexo clean

$ hexo g

$ hexo s --debug

这种带 debug 的运行,如果出现错误,可以在命令行中看到错误提示信息。

部署步骤

三部曲:

1

2

3
$ hexo clean

$ hexo g

$ hexo d

当然在部署之前,需要先配置好配置文件中的 deploy。

常用命令

1

2

3

4

5

6

7
$ hexo new "postName"  

$ hexo new page "pageName" # 新建页面

$ hexo generate # 生成静态页面至public目录

$ hexo server # 开启预览访问端口(默认端口4000,'ctrl+c'关闭server)

$ hexo deploy # 项目部署

$ hexo help # 查看帮助

$ hexo version # 查看Hexo的版本

简写命令

1

2

3

4
$ hexo new == hexo n

$ hexo generate == hexo g

$ hexo server == hexo s

$ hexo deploy == hexo d

常见问题1

在 hexo 的配置和设置文件中,在冒号后面没留空格会导致出问题:
错误的设置:

1

2

3
author:SunDuncan

email:[email protected]

language:zh-CN

正确的设置:

1

2

3
author: SunDuncan

email: [email protected]

language: zh-CN

常见问题2

关于 Git 提交中用户名和 Email 的设置

1

2
git config --global user.name "Your name"

git config --global user.email "Your email"

常见问题3

Hexo 中的图标使用的是 Font Awesome ,所以,我们的博客已经自带了 Font Awesome 中的所有图标,基本可以满足我们的所有需求,我们可以去 Font Awesome 中查找我们想要使用的图标。
<i class="fa fa-github"></i>
<i class="fa fa-github fa-lg"></i>
<i class="fa fa-github fa-2x"></i>

最后要说的是:

博客源码 , 欢迎 star

原文地址:https://www.cnblogs.com/liuzhongrong/p/12251320.html

时间: 2024-11-02 23:34:29

Hexo-NexT搭建个人博客(一)的相关文章

《Hexo+github搭建个人博客》

<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+github搭建个人博客>1 思维导图总览:2 What?2 简介:2 Hexo:2 NodeJs2 Github4 Git5 Github page:5 Markdown6 How?7 环境配置:7 安装Git8 安装Node.js9 安装hexo13 第一步:打开cmd.13 第二步:进入NodeJS

使用Node.js+Hexo+Github搭建个人博客(续)

一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在上篇博文的基础上分别从以下几个方面做简单的后续介绍: 博客相关配置介绍 博客主题 Yilia 配置介绍 如何制作并配置网站缩略图 如何将博客同步到 Github.Coding 中 如何使用 Git 同步 Github 与 Coding 的代码 如何申请域名并作域名解析 如何将域名绑定至 Github.Codi

使用hexo+GitHub搭建个人博客的心得(含教程)

Author Email Yaoyao Liu [email protected] 前言 对于广大CS专业的学生和码农,找一个地方写博客,记录一些编程.配置环境.阅读论文的心得体会是一个很常见的习惯.当然想搭建个人博客,就需要找个靠谱的平台,主要就是以下的两种方式: 使用网站提供的博客平台,例如国内的CSDN.博客园:国外的Blogger.Wordpress 自己建站,发布到自己的服务器上,或者发布到GitHub.GitLab.Bitbucket等支持静态网页发布的git平台 针对于第一种方式,

Hexo快速搭建静态博客并实现远程VPS自动部署

这篇文章将如何搭建hexo,以及如何通过git webhooks实现远程vps的自动部署 这篇文件适合的条件: 简单的用于个人博客.公司博客展示,hexo的定位是静态博客,要实现动态服务器的功能并不适合 有自己私有的服务器.vps.域名 git仓库,Github或国内的Coding.net hexo本地部署 流程:先在本机搭建好hexo环境,push到git仓库,再部署到服务器上. 第一步,安装hexo命令行工具,这个工具在服务器端也需要执行安装 1 npm install hexo-cli -

windows下hexo+github搭建个人博客

网上利用hexo搭建博客的教程非常多,大部分内容都大同小异,选择一篇合适的参考,跟着一步一步来即可. 但是,很多博客由于发布时间较为久远等问题,其中某些操作在现在已不再适用,从而导致类似于我这样的小白在搭建过程中困难重重. 因此在我这第一篇博客中,主要记录我搭建时参考的两篇博客中出现问题的地方(网上很多的博客都会导致这些问题,因此如果你在搭建过程中遇到困难的话,不妨来这里找一下答案) 参考的两篇博客 这里附上两篇博客的链接: windows下Hexo博客搭建过程 关于HEXO安装失败的解决方法

Ubuntu+Hexo+Github搭建个人博客

目录 目录 目录 1. 简介 环境 2. Git安装及配置 2.1 安装Git 2.2 创建Git仓库 2.3 配置git仓库 2.4 添加公钥 3. Node安装 4. Hexo安装及配置 4.1 安装hexo 4.2 初始化hexo文件夹 4.3 Hexo操作 4.4 将git库和hexo链接起来 5. 更换主题 6. 博客迁移 6.1 常规迁移 6.2 特殊情况 1. 简介 以前部署的Hexo博客是在Windows上搭建的,在Windows系统使用很方便,碰到一些问题也都能够解决:现在安装

HEXO+PAGE 搭建个性博客

新博客地址: http://javen205.oschina.io https://javen205.github.io Hexo 是高效的静态站点生成框架,她基于 Node.js. 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容 主题: NexT http://theme-next.iissnan.com/

hexo+github搭建个人博客

写在前边:Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 1.安装git[因为我们写好的博客受与github相关联,在本地可以运行后,还要通过git相关工具自动化部署到github,所以git必须有] 2.安装node[hexo的服务器是基于node的] 3.安装hexo   全局输入npm install hexo-cli -g 4.申请github账号 5.新建一个文件夹      我在e盘下

3min快速使用Hexo+GitHub搭建免费博客

准备工作 至于为什么使用Hexo,而不使用Jekyll,网上已经做了一些比较,这里就不在赘述. 由于是免费博客,本篇文章暂不涉及域名申请. 在开始之前,已有的资源包括: 申请GitHub账户 安装Node.js 安装Git 环境检测 输入以下命令有返回版本号,说明Node.js环境配置正确: 1 node -v 2 npm -v 安装Hexo 首先在D盘符下建立hexo文件夹,配置完成后博客资源存放路径: D:\hexo\blog 依次输入以下命令: 1 cd D:/hexo 2 npm ins

hexo+github 搭建的博客重做系统以后如何重新配置

重做电脑系统以后 1. 安装 git  node  2.在桌面右键启动git 然后安装hexo $ npm install -g hexo-cli 3.接着在文件夹里右键git,去测试本地是否能预览: (有问题的话去http://www.paopaoche.net/jiaocheng/85988.html) 4.本地ok的话就去重新配置钥匙,去github 删除之前的,然后添加新的, 参考这里:https://segmentfault.com/a/1190000004947261 5.然后验证邮