准备工具node.js和git
安装node.js
window童鞋点这里
mac童鞋点这里
linux童鞋点这里
安装git
window童鞋点这里
mac童鞋点这里
linux童鞋点这里
用hexo创建博客
下面的命令,你们可以在cmd中也可以用git中的git bash都可以,输入每个命令之后别忘了一个enter执行
mkdir blog 创建一个博客文件夹
cd blog 进入目录
npm install hexo-cli -g(对这个文件夹全局安装依赖一次就够了,后面可以直接使用hexo相关的操作)
hexo init(初始化hexo)
hexo generate生成静态页面到public文件夹,等待deploy部署
hexo server(测试页面) http://localhost:4000
这一步就ok了,你可以到目录source/_posts看到md文件,这里就是我们以后要编辑的博客,当然不会md语法的请查看我的另一篇文章
开始写博客吧
新建文章:如hexo new "新建文章的标题"
hexo new photo "标题" 生成一个带头图的文章,不过大可以不用,因为layout: photo经测试可以省略,直接写photos: 图片地址
新建了之后,要查看写的结果,就用执行命令hexo server,之后访问本地回流地址http://localhost:4000
部署的相关配置
编辑配置文件:vi _config.yml
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 网站信息
title: 网站标题
subtitle: 网站副标题
description: 网站描述
author: 网站作者名字
language: #网站语言,默认是英语(en)
timezone: #网站时区
# URL 网站设置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: seayxu.github.io #网站的地址
root: / #网站的根目录,如果是子文件夹下,则填写子文件夹路径
permalink: :year/:month/:day/:title/ #文章链接地址格式
permalink_defaults:
# Directory 目录设置
source_dir: source #资源文件夹,默认是source
public_dir: public #公共文件夹,默认是public
tag_dir: tags #标签文件夹,默认是tags
archive_dir: archives #档案文件夹,默认是archives
category_dir: categories #分类文件夹,默认是categories
code_dir: downloads/code #代码文件夹,默认是downloads/code
i18n_dir: :lang #国际化文件夹,默认跟language相同
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: false
tab_replace:
# Category & Tag 分类和标签
default_category: uncategorized #默认分类名称
category_map:
tag_map:
# 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 #每页显示数量,设置为0表示不启用分页
pagination_dir: page #分页文件夹名称
# Extensions 扩展
## Plugins: https://hexo.io/plugins/ #插件
## Themes: https://hexo.io/themes/ #主题
theme: landscape #主体名称
feed:
type: atom
path: atom.xml
limit: 20
#type 表示类型, 是 atom 还是 rss2.
#path 表示 Feed 路径
#limit 最多多少篇最近文章
sitemap:
path: sitemap.xml
#path 表示 Sitemap 的路径. 默认为 sitemap.xml.
baidusitemap:
path: baidusitemap.xml
# Deployment 部署
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:xuywei/xuywei.github.io.git #github仓库地址
branch: master # github分支
部署到github
创建github仓库:用户名.github.io 如:xuywei.github.io
然后执行hexo deploy就自动提交.deploy_git的文件到部署配置的github仓库
hexo generate生成静态页面(静态内容在public文件夹内,这个文件夹是以后发布到github中的文件)
hexo clean删除public文件夹中的内容(其实并没有啊,大概是清理缓存的缘故)
hexo deploy部署hexo
部署的时候会提示没有发现git,使用npm install hexo-deployer-git --save安装git插件,再次重新部署就可以了
总结
- 安装node.js和git
- 安装hexo
npm install -g hexo
- 部署hexo
mkdir blog
cd blog
hexo init
执行之后会生成以下文件
.deploy:执行hexo deploy命令部署到GitHub上的内容目录
public:执行hexo generate命令,输出的静态网页内容目录
scaffolds:layout模板文件目录,其中的md文件可以添加编辑
scripts:扩展脚本目录,这里可以自定义一些javascript脚本
source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
_drafts:草稿文章
_posts:发布文章
themes:主题文件目录
_config.yml:全局配置文件,大多数的设置都在这里
package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮
- 创建博客
hexo new "博客的文章名"
hexo new page "比如about页面"
- 生成静态页面
hexo clean先清除缓存
hexo generate生成页面
- 本地发布
hexo server可以输入127.0.0.1:4000打开你的博客
- 发布到github
hexo deploy将public中的静态页面复制到.deploy文件夹中并提交到github
- 一些简易命令
hexo命令缩写:
hexo n:hexo new
hexo g:hexo generate
hexo s:hexo server
hexo d:hexo deploy
hexo命令组合:
hexo deploy -g
hexo server -g
注意:命令不要随意组合,会没有效果
-
写博客的一些小细节
layout: photo #这个属性是博客的样式,有一个头图样式,如上图
title: test2 #标题
date: 2016-09-20 13:55:04 #写作时间
tags: [haha,toot,huhu] #多个标签
photos: http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg #图片的地址
description: 你对本页的描述--- #只是对文章的一个描述,点开文章不会再有