hexo+css创建自己的blog（搭建）

phoenixsky 发布于2019-08-29 13:20 / 2761人阅读

摘要：目前比较火的和的文档都是使用框架实现的。二的安装安装前，确保电脑中已经安装了和。可以参照来自定义日期格式。值为时禁用主题部署参考部署部分的配置五部署上部署安装中配置部署部分的设置终端进入目录运行

一、什么是hexo

Hexo是一个快速、简洁且高效的博客框架，使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。目前比较火的vue和weex的文档都是使用hexo框架实现的。

二、hexo的安装

安装hexo前，确保电脑中已经安装了node和git。

node安装

方法一、
    直接安装node：ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
方法二、
    先安装homebrew： /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    后安装node：brew install node

git安装

先安装homebrew： /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
后安装git：brew install git

hexo安装

npm install -g hexo-cli

三、创建项目

新建项目: hexo init folder

进入: cd folder>

安装依赖包: npm install

新建一篇文章: hexo new iOS-APIs (文件会在/source/_posts下)

启动: hexo server

浏览器打开: http://localhost:4000/document/

四、hexo配置

配置文件为_config.yml
参考: https://hexo.io/docs/configur...
github: https://github.com/hexojs/hexo/

Site （网站）

网站标题
title: weex使用手册

网站副标题
subtitle: weex中文手册

网站描述
description: 整理weex手册, 包括通用特性, 内建组件, 内建模块, CSS 单位, 通用事件, Native DOM APIs, Weex 实例变量, Web 标准, JS Service, Vue, 高阶知识, 迁移

作者名字
author: lu.wei

网站使用的语言
language: 简体中文

网站时区Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。
timezone: UTC

URL （网址）

如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

网址
url: https://github.com/stardew516...

网站根目录
root: /document/

文章的永久链接格式
permalink: :year/:month/:day/:title/

永久链接中各部分的默认值
permalink_defaults:

Directory （目录）

资源文件夹，这个文件夹用来存放内容。
source_dir: source

公共文件夹，这个文件夹用于存放生成的站点文件。
public_dir: public

标签文件夹
tag_dir: tags

归档文件夹
archive_dir: archives

分类文件夹
category_dir: categories

Include code 文件夹
code_dir: downloads/code

国际化（i18n）文件夹
i18n_dir: :lang

跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。
skip_render:

Writing （文章）

新建文章的文件名称
new_post_name: :title.md

预设布局
default_layout: post

在中文和英文之间加入空格
auto_spacing: false

把标题转换为 title case
titlecase: false

在新标签中打开链接
external_link: true

把文件名称转换为 (1) 小写或 (2) 大写
filename_case: 0

显示草稿
render_drafts: false

启动 Asset 文件夹
post_asset_folder: true

把链接改为与根目录的相对位址
relative_link: false

显示未来的文章
future: true

代码块的设置

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

Home page setting （主页设置）

1. path: 博客索引页的跟路径,默认为空
2. per_page: 每页展示的文章量, 为0时表示不分页
3. order_by: 排序, 默认日期降序
index_generator:
  path: ""
  per_page: 10
  order_by: -date

Category & Tag （分类 & 标签）

默认分类
default_category: uncategorized

分类别名
category_map:

标签别名
tag_map:

Date / Time format （日期 / 时间格式）

hexo使用Moment.js来解析和显示时间。
可以参照http://momentjs.com/docs/#/di...来自定义日期格式。

日期格式
date_format: YYYY-MM-DD

时间格式
time_format: HH:mm:ss

Pagination （分页）

每页显示的文章量 (0 = 关闭分页功能)
per_page: 10

分页目录
pagination_dir: page

Extensions （扩展）

插件: https://hexo.io/plugins/
主题: https://hexo.io/themes/

当前主题名称。值为false时禁用主题
theme: landscape

Deployment （部署）

参考: https://hexo.io/docs/deployme...

部署部分的配置

deploy:
  type: git
  repo: https://github.com/stardew516/document
  branch: master
  message: hexo + css

五、部署

github上部署:

安装hexo-deployer-git: npm install hexo-deployer-git --save

_config.yml 中配置

# 部署部分的设置
deploy:
  type: git
  repo: https://github.com/stardew516/document
  branch: master
  message: hexo + css

终端进入目录,运行: hexo deploy

云服务器 GPU云服务器创建自己的域名怎样创建自己的网站自己创建的文件夹创建自己的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112538.html

阿里云VPS搭建自己的的Hexo博客

摘要：博客的架构先搞明白博客从搭建到自动发布的架构，才能更好的理解我们每一步进行的操作。整个搭建流程第一部分服务器环境搭建，包括安装配置创建用户。在裸库的文件夹中，新建文件。 1. 博客的架构先搞明白Hexo博客从搭建到自动发布的架构，才能更好的理解我们每一步进行的操作。不然只跟着步骤过了一遍，却不知道为什么这么做。首先看这张架构图：showImg(https://segmentfaul...

hizengzeng 2019-07-25 13:42 评论0 收藏0
从 0 开始搭建一个技术博客，私藏干货~

摘要：下面贴上栈长博客的地址，也是技术栈的官方博客地址今天分享一下，如何从开始搭建一个自己的技术博客，基于栈长的博客。的国内访问不是很快，这里推荐使用自己搭建国内的云服务器，使用搭建静态服务。技术博客的选型有很多种，如：博客园、CSDN、开源中国、简书、知乎等……都可以用来写文章，形成自己的技术博客。上面的博客都是第三方的，有没有方式搭建自己的服务器、自己的域名的博客呢？栈长知道的成熟方...

Zhuxy 2019-08-16 14:48 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——从零开始

摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

Paul_King 2019-08-29 12:14 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——从零开始

摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

zacklee 2019-08-20 15:12 评论0 收藏0
2017年最新基于hexo搭建个人免费博客——从零开始

摘要：前言搭建此博客是因为通过上了解到进而知道了可以把静态网页博客托管给仓库或许您已经通搭建个人博客网站了解到如何通过实现个人博客网站的建立。但是尽管您已经成功建立博客网站，但是你需要对网站做合适的配置和调整才能迎合你的网站要求。 showImg(https://segmentfault.com/img/remote/1460000008725509?w=1449&h=459); 前言搭建...

hlcfan 2019-08-01 16:31 评论0 收藏0