mkdir blog
cd blog
npm install -g hexo
hexo init xiaowen
cd xiaowen
hexo g
hexo s
于是就有了这个...
下面呢一步一步来详细说明
需要的工具
工欲善其事,必先利其器,需要的一些工具和平台,如果已经有这些了,可以跳过这部分。
git(必须)
node.js
hexo 的安装
git 和 node 安装完成后,就需要安装主角了,那就是 hexo 。打开你的桌面,右键单击会出现 Git Base Here
和 Git Gui Here
,选择第一个 Git Base Here
就可以了,就可以输入命令行了。如下图
这个窗口是可以设置和调整的,在窗口里面右键会出来设置的菜单,点击option
即可。如果实在不会设置的,可以联系我!下面可以执行命令安装了
npm install -g hexo --->执行这个命令出错或者有其他的问题时,可能是被墙的原因,可以安装淘宝的npm镜像,执行如下命令安装
npm install -g cnpm --registry=https://registry.npm.taobao.org --->参考:https://npm.taobao.org/ ,执行完了这个命令后,就可以执行下面的命令了
cnpm install -g hexo
注: 上面的命令如果执行出错才需要执行2和3的命令,否则执行1命令即可。
简单的验证下
走完了上面的步骤,应该是没有多大问题了,记得验证下 git 和 node 的安装是否完好,可以执行下面的命令验证下版本
git version ---> 这个是验证git版本的
node -v ---> 这个是验证node版本的
npm -v ---> 这个是验证npm包管理器的
hexo -v ---> 这个是验证hexo 的
经过上面的步骤,工具都已经安装完成了,下面可以开始创建本地博客啦!
本地博客
经过上面的工具操作,现在可以执行命令来创建博客了,主要的命令大约有一下几条
hexo init <folder> --->folder : 带这个参数说明是在当前创建一个这样博客的文件夹
hexo generate (hexo g 也可以)
hexo server (hexo s 也可以)
hexo clean --->清理缓存
hexo deploy (hexo d 也可以)--->部署上去
看到这样的效果你已经成功了。
so...下面应该干点啥了呢?
我的第一反应是:换个好看点的主题或者背景,然后放上一两篇文章看看效果,满意后呢部署到github上去,让别人也可以访问看看,哈哈
换主题
建议你还是先跟我一样用这个主题吧,把流程走完熟悉了后你可以再设置你所需要的主题或者其他的。
回到根目录(是指你创建这个项目的目录),先把主题clone下来,执行如下命令:
git clone themes/next
clone 完成后,你会在目录themes
下看到一个文件夹next
,这时候说明已经clone下来了。然后就是这个启用主题了。打开根目录下的_config.yml
文件(建议你用notepad ++ 打开或者 atom 编辑器 或者 Visual Studio Code 编辑器 或者 sublime text 编辑器),找到如下的信息:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
把theme: landscape
改为theme: next
,保存,然后执行命令:
hexo g
hexo s
看到如下效果说明主题切换成功了
这个主题有四种样式(这个文件在themes\next
底下的_config.yml
),分别如下:
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
新建文章
看了新样式,很期待应该怎样写文章吧?
在目录source\_posts
下有一个hello world.md
的文件,这个就是你看到的博客第一篇文章。那么应该要怎样创建文章呢?执行如下命令:
hexo new hexo博客 --->“hexo博客” 这个是你的文章名称
添加主页tags菜单
在刚刚的新建文章的命令中,其实是隐含了一个参数 layout
,这个参数的默认值是post
,所以你看到新建的文章是在目录_post
里面的。
例子:添加一个标签的菜单按钮
在样式文件夹下的配置文件中设置
在文件themes\next\_config.yml
中有如下信息:
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
home: / || home
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
#about: /about/ || user
# Enable/Disable menu icons.
menu_icons:
enable: true
你有没有发现,点击浏览器上面的归档,网址后面有一个archives
,其实就是在这里设置的。
现在要新加一个tags的菜单,那么就需要把上面的tags
那行注释去掉。
命令行添加
注释了以后,执行命令:
hexo new page tags --->注意的是:这个命令是在根目录底下执行的
执行完了以后,进入source
文件夹,你会发现多了一个tags
的文件夹,再进入,打开index.md
,在文件里面随便输入点东西,保存,执行hexo g
和 hexo s
,你就看到一个标签
的菜单选项了,点击后,页面跳转显示的内容就是你刚刚输入的内容。
添加了菜单的item,怎样才使文章有标签呢?
在文章里面添加标签
需要在文章里面添加标签,在每篇文章的开头都会有如下的信息:
title:
date:
tags:
只要我们在tags里面添加就行,比如tags: [andoid html]
在首页添加‘阅读全文’
主要有三种方式:
在文章中使用 `` 手动进行截断,Hexo 提供的方式。--->推荐方式
在文章的 front-matter 中添加 description,并提供文章摘录
自动形成摘要
auto_excerpt:
enable: true
length: 150
添加头像信息
部署到github
建仓库
create_new_repositiory.png设置仓库信息
github_setting_1.png github_setting_1.png github_setting_2.png配置远程仓库信息
打开根目录的文件vim _config.yml
,按照下面的信息进行配置
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: ---> 远程仓库地址
branch: master ---> 分支
部署到远程仓库
到了这一步,也就是执行命令的事情了
npm install hexo-deployer-git --save --->连接远程仓库,如果是第一次,会弹出窗口输入github 的帐号和邮箱
或者 cnpm install hexo-deployer-git --save
hexo deploy --->这是部署的,执行完这个就可以看效果了
验证
每次部署的操作流程
hexo clean
hexo generate
hexo deploy
本地操作预览的流程
hexo g
hexo s
文档参考
最后:下一篇教你打造更好看的博客和建立属于自己的专属域名。