搭建hexo博客

时间:2021-12-17 05:06:17

hexo 是一款快速、简单、并且强大的博客博客模板框架 - 基于nodejs 。

特点

  • 基于nodejs
  • 使用Markdown书写文章
  • 无需数据库
  • 可以使用GitHub Pages发布

要用到的模块

  • node.js
  • hexo
  • git
  • 多说

git需要提前安装,hexo init的时候用到。

安装Nodejs

下载地址: http://nodejs.org/download/

验证node和npm是否安装成功(由于新版的NodeJS已经集成了npm),在cmd中输入

node -v
npm -v

出现版本号就是正确安装了。

安装hexo

安装hexo,-g表示全局安装。

npm install -g hexo

如果有warn可以不用管。

初始化一个博客

选择一个常用的目录(不要有中文或者空格),初始化一个博客应用:

hexo init

文件夹自动生成建网站所需的文件。

cd blog
npm install

会在文件夹下安装node_modules依赖。

本地测试

hexo server

然后就可以http://localhost:4000/ 中打开了

记得关server是ctrl+c

此时文件目录为:

.deploy_git
node_modules nodejs 相关依赖
public 自动生成的静态html目录
scaffolds 脚手架 - 也就是一个工具模板
source 存放markdown文章目录
themes 存放皮肤的地方
_config.yml 配置文件
CNAME github域名绑定文件
db.json 数据
package.json 配置依赖

新建文章

在blog根目录下我们可以通过 hexo new <title> 命令来实现新建文章。

例如我们想新建一篇主题为hello的blog:

hexo new hello

hexo会在 source/_posts/ 下新建hello.md 文件。

编辑 hello.md 就是编辑你的blog内容了 — markdown语法

hello.md 的文档和目录可以这样添加:

title: hexo、github、多说、搭建免费博客
date: 2014-10-19 12:56:58
tags:
- tag1
- tag2
- tag3
categories:
- 目录
--- // 你的内容
<!--more--> // 以上为摘要

我们也可以手动在source/_posts/ 下新建md 文件。

更换主题

主题目录:themes/

在此目录放置主题,并在根目录的_config.yml更改

theme: landscape

即可。

部署到github

初步准备

安装git :

下载地址:http://msysgit.github.io/

github上创建账号

去https://github.com/注册账号,并建立repository

建立仓库名必须是XXX.github.io。每个用户可以建立一个与用户名一致的XXX.github.io特殊仓库。

部署

部署到github 非常简单。因为hexo已经为你集成好了发布到github的配置。

我们只需要 修改 blog 目录下的 _config.yml 文件。

打开 _config.yml 找到如下配置:

# 部署配置
deploy:
type: git
repo: git@github.com:xxx/xxx.github.io.git
branch: master

回到 blog 目录 执行

hexo g
hexo d

你会发现public 目录下的页面已经发布到github gh-pages 分支了。往后我们要做的就是用自己的域名指向 github。

设置独立域名

默认的域名是xxx.github.io。自己如果有域名,可以绑定。

例如 我的域名为 blog.me

1 我们要在github blog项目下新建一个CNAME文件 内容为 blog.me

2 将我们得域名A 记录到 207.97.227.245 这个ip

域名解析完成后我们 blog.me 就是我们的blog了。支持子域名。207.97.227.245为github指定绑定的域名。

插件安装

多说

评论插件多说为hexo量身打造了一套解决方案。

查看教程

站点创建地址

rss

rss的安装非常简单 ,已经有人做好了插件,安装只需一步。

npm install hexo-generator-feed

启动服务器,用浏览器打开 http://localhost:4000/atom.xml, 就可以看到RSS已经生效了。

sitemap

同样是一条命令,就可以完成。

npm install hexo-generator-sitemap

启动服务器,用浏览器打开 用浏览器打开 http://localhost:4000/sitemap.xml 发现site已经生效。

命令概览

清除缓存,解决很多奇怪问题

hexo clean

hexo安装升级

npm install hexo -g #安装
npm update hexo -g #升级
hexo init #初始化

简写

hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo p == hexo publish
hexo g == hexo generate#生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署

服务器

hexo server #Hexo 会监视文件变动并自动更新,您无须重启服务器。
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

监视文件变动

hexo generate #使用 Hexo 生成静态文件快速而且简单
hexo generate --watch #监视文件变动

平时发布文章

hexo g
hexo d

配置参考

配置文件使用#注释,注意有空格。

根目录_config.yml配置:

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
## 空一格 # Site
title: 飞鸿影~的blog
subtitle:
description: 开拓不止,路才无尽。
author: 飞鸿影
email:
language: zh-CN
timezone: # URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 'http://52fhy.github.io/'
root: /
permalink: :year/:month/:day/:title/
# permalink: archives/:id/
permalink_defaults: # Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: # Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace: # Category & Tag
default_category: uncategorized
category_map:
tag_map: # 归档设置
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 2
tag: 2 # 服务器设置
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
## server_ip: 0.0.0.0
logger: false
logger_format: # Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss # Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page # 插件和皮肤
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: yilia ## landscape,yilia,pacman,coney
exclude_generator: # RSS
rss: /atom.xml #rss地址 默认即可 # Markdown语法
## https://github.com/chjj/marked
markdown:
gfm: true
pedantic: false
sanitize: false
tables: true
breaks: true
smartLists: true
smartypants: true # CSS的stylus格式
stylus:
compress: false # Deployment
## Docs: http://hexo.io/docs/deployment.html # 部署配置
deploy:
type: git
repo: git@github.com:xxx/xxx.github.io.git
branch: master # 评论
## disqus_shortname:
duoshuo_shortname: fhyblog

主题目录下也有个配置,大家根据作者说明进行配置。

参考

1、hexo + github + 多说 来搭建免费博客 // Netpi 日志

http://blog.netpi.me/实用/hexo/

2、使用hexo和Github上创建自己的博客_其它_其它语言-ITnose

http://www.itnose.net/detail/6231502.html

3、hexo常用命令笔记 - SegmentFault

http://segmentfault.com/a/1190000002632530

搭建hexo博客的更多相关文章

  1. 史上最详细&OpenCurlyDoubleQuote;截图”搭建Hexo博客并部署到Github

    http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html 大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hex ...

  2. 史上最详细&OpenCurlyDoubleQuote;截图”搭建Hexo博客——For Windows

    http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...

  3. 阿里云VPS搭建Hexo博客

    最近买了一个阿里云服务器,准备写自己的网站,和将自己的作品放在上面:开始的时候,感觉就一个服务器应该很简单,但是从申请域名到备案,再到服务器搭建,没想到一波三折:闲话不多说,只是记录我在搭建时,最简单 ...

  4. 树莓派搭建 Hexo 博客(二)

    Hexo 一个开源的博客框架,本文记录了一下在树莓派上搭建 Hexo 博客的过程. 上一篇介绍了 Hexo 的配置,现在网站已经能在本地访问了,也能通过 hexo generate 命令生成静态界面 ...

  5. 树莓派搭建 Hexo 博客(一)

    Hexo 一个开源的博客框架,本文记录了一下在树莓派上搭建 Hexo 博客的过程. 什么是 Hexo? Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解 ...

  6. 在vps上搭建hexo博客

    最近更换了服务器,需要把自己的Hexo Next重新部署到新服务器上,本文记录一下在vps上搭建hexo博客的过程. 在vps上搭建hexo博客需要下面这些工具: Nginx: 用于博客展示 SSH: ...

  7. 利用Serverless应用搭建Hexo博客

    本文将介绍如何使用火爆的Serverless应用,15分钟快速搭建Hexo博客.以腾讯云提供的Serverless应用–云开发为例: 步骤1:安装 CloudBase CLI 以及本地部署 Hexo ...

  8. 搭建hexo博客遇到的问题

    搭建hexo博客遇到的问题 常用命令 hexo clean 清除hexo缓存 hexo generate 生成文章 hexo deploy 部署 hexo new post name 新建文章名 he ...

  9. Termux搭建hexo博客并部署到GitHub

    Termux搭建hexo博客并部署到GitHub 安装 termux-change-repo apt update apt install git && nodejs &&am ...

随机推荐

  1. PermGen space Eclipse 终极解决方案

    1.选中项目右键 run or debug configurations... 2.在 VM arguments 加入  -Xms128m -Xmx512m -XX:PermSize=64M -XX: ...

  2. 关于TreeSet倒序排列和自定义排列

    本文部分转自:http://blog.csdn.net/kaituozhe345/article/details/6842945 1.TreeSet的自然排序. TreeSet存储对象的时候, 可以排 ...

  3. &period;net LINQ and PLINQ

    本文  学习自  微软官网文档   2016/12 LINQ 背景   以前写与DB 相关的代码, 程序员须要懂开发语言(C#, VB)和查询语言跟数据库交互. LINQ 的出现使应用程序形成基于集合 ...

  4. hdu 5073 Galaxy

    题意是给定n个点,让求找到一个点p使得sigma( (a[i] - p) ^ 2 ) 最小,其中a[i]表示第i个点的位置.其中有k个点不用算. 思路:发现这道题其实就是求n-k个点方差. 那么推一下 ...

  5. WPF Multi-Touch 开发:高级触屏操作(Manipulation)

    原文 WPF Multi-Touch 开发:高级触屏操作(Manipulation) 在上一篇中我们对基础触控操作有了初步了解,本篇将继续介绍触碰控制的高级操作(Manipulation),在高级操作 ...

  6. angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic

    首先安装 swiper npm install --save swiper 或者 bower install --save swiper <link rel="stylesheet&q ...

  7. JVM内存管理概述与android内存泄露分析

    一.内存划分 将内存划分为六大部分,分别是PC寄存器.JAVA虚拟机栈.JAVA堆.方法区.运行时常量池以及本地方法栈. 1.PC寄存器(线程独有):全称是程序计数寄存器,它记载着每一个线程当前运行的 ...

  8. centos6&period;5搭建hadoop完整教程

    https://blog.csdn.net/hanzl1/article/details/79040380 博客地址http://blog.csdn.net/pucao_cug/article/det ...

  9. &lbrack;Swift&rsqb;LeetCode882&period; 细分图中的可到达结点 &vert; Reachable Nodes In Subdivided Graph

    Starting with an undirected graph (the "original graph") with nodes from 0 to N-1, subdivi ...

  10. 腾讯云短信服务使用记录与&period;NET Core C&num;代码分享

    1.即使是相同的短信签名与短信正文模板,也需要针对“国内文本短信”与“海外文本短信”分别申请.开始不知道,以为只要申请一次,给国外手机发短信时给api传对应的国家码就行,后来才发现需要分别申请. 2. ...