Mac - Hexo+GitHub轻松搭建自己的博客
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。官方文档传送门。Hexo的安装是个很快速简便的过程,但依然还是有不少坑。这里记录个我的安装过程(这是我的Hexo+GitHub+Next+Markdown个人网站),给大家一些参考。
整理一下安装流程:
.hexo是基于nodejs的,需安装nodejs,安装nodejs最好选择homebrew .首先查看电脑是否安装ruby,因为homebrew安装依赖ruby .安装顺序:homebrew---->nodejs---->hexo
安装前提
需要安装 Node.js 和 Git 两个应用程序,直接到官网安装最新版本即可,如已安装请跳过。
安装Hexo
安装完Node.js 及 Git 后,即可使用npm来安装Hexo:
$ npm install -g hexo-cli
初始化Hexo
创建一个目录用来作为你的blog目录,例如 MyBlog;并在该目录中进行Hexo的初始化:
$ hexo init MyBlog
$ cd ~/MyBlog/
$ npm install
新建完成后,得到以下目录:
·
|-- _config.yml
|-- package.json
|-- scaffolds
|-- source
| |-- _drafts
| |-- _posts
|-- themes
至此,你就完成了Hexo的安装及初始化,接下来我们就可以进行本地的预览啦:
先安装hexo server
$ sudo npm install hexo-server
然后生成静态页面并打开hexo本地服务
$ hexo generate (或 hexo g)
$ hexo server
按命令行提示,打开 http:\/\/localhost:4000\/ 即可看到默认主题的默认页面了。
可能加载会很慢,因为默认主题中使用了些Google的资源,后面更换主题就会快很多了。
安装homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装nodejs
brew install node
在安装nodejs过程中,提示如下警告:
You have Xcode installed without the CLT;
根据提示进行安装
安装hexo
sudo npm install -g hexo
创建文件夹
mkdir blog
cd blog
hexo init
此时blog文件下出现了很多文件和文件夹
生成一套静态网页
hexo generate /** 生成一套静态网页 **/
hexo server /** 在服务器上运行 **/
在浏览器上运行http://localhost:4000就能看到网站首页:
撰写博客
进入终端,使用cd命令进入到有Hexo框架的目录里面,输入:
hexo new post "我的第一篇博客"
随后出现如下的消息:
INFO Created: ~/blog/source/_posts/我的第一篇博客.md
证明创建文章成功,“我的第一篇博客”这个md文件会创建在source/_posts/的文件下。该md文件在自动生成时会带有一些属性:
title: 定义了博文的标题 date: 定义了创作博文的时间 tags: 定义了博文的标签
除了这个三个属性以外我们还可以扩展一些属性:
update: 定义了最后修改的时间 comments:定义能否评论此博文(默认为true) categories: 定义了博文的种类 配置文件 -- _config.yml说明
Hexo的每一个功能的配置文件都是_config.yml, 具体说明看下面的注解:
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/ # Site ##修改以适应搜索引擎的收录
title: Hexo ##定义网站的标题
subtitle: ##定义网站的副标题
description: ##定义网站的描述
author: jason jwl ##定义网站的负责人
language: ##定义网站的语言,默认zh-Hans
timezone: ##定义网站的时区 # URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com ##定义网站访问的域名
root: / ##定义所在Web文件夹在哪个目录
permalink: :year/:month/:day/:title/ ##定义时间格式
permalink_defaults: # Directory
source_dir: source ##定义从哪个文件夹获取博客资料
public_dir: public ##定义生成静态网站到哪个文件夹 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:
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 to disable pagination
per_page: ##定义每一页多少条博客
pagination_dir: page # Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape ##定义使用的主题 # Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
注意: 另外修改这些属性时,请注意格式,属性和值要空一个格,比如theme: landscape。
hexo的基本配置
以下是hexo配置文件 _config.yml 的基本内容及基本设置,更多个性化设置请参考官方文档:
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site ##页面信息
title: Who's Blog ##标题,即浏览器标签栏显示的内容
subtitle: Why so serious? ##副标题
description: ##描述,简介
author: Charles Wei ##作者
language: zh-CN ##语言
timezone: Asia/Shanghai ##时区 # URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://wwww.charleswei.me ##域名,后面自定义域名后,写在这里,用 .github.io的话,这里用默认的不用改
root: /
permalink: :year/:month/:day/:title/
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: :year-:month-:day-: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:
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 to disable pagination
per_page:
pagination_dir: page
# Extensions ##主题设置
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: indigo # Deployment ##git部署关联
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: github: https://github.com/glassweichao/glassweichao.github.io.git
branch: master
主题配置
Hexo具有高定制的主题效果,你可以从Hexo的主题库中选择合适的主题,也可以自己制作。
以我现在使用的indigo主题为例。首先将主题库clone到MyBlog目录下的themes目录:
git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo
安装less,主题使用less作为css预处理工具:
npm install hexo-renderer-less --save
安装feed,用于生吃RSS:
npm install hexo-generator-feed --save
安装json-content,用于生成静态站点数据,提供搜索功能的数据源:
npm install hexo-generator-json-content --save
开启标签页:
hexo new page tags
修改MyBlog/source/tags/index.md的源数据: layout: tags
noDate: true
comments: false
---
修改hexo配置文件_config.yml中的主题标签: theme: indigo
最后修改主题配置文件MyBlog/themes/indigo/_config.yml: #添加新菜单项遵循以下规则
# menu:
# link: fontawesome图标,省略前缀,本主题前缀为 icon-,必须
# text: About 菜单显示的文字,如果省略即默认与图标一致,首字母会转大写
# url: /about 链接,绝对或相对路径,必须。
# target: _blank 是否跳出,省略则在当前页面打开
menu:
home:
text: 主页
url: /
archives:
url: /archives
tags:
url: /tags
github:
url: https://github.com/glassweichao
target: _blank
link:
text: 测试
url: /
rss: /atom.xml
#你的头像,替换掉 indigo/source/img/logo.jpg 即可
urlavatar: /img/logo.jpg
# Content
tags:
title: 标签
#是否开启分享
share: true
#是否开启搜索
search: true
#是否大屏幕下文章页隐藏导航
hideMenu: true
#是否开启toc
#toc: false 关闭toc
toc:
list_number: true # 是否显示数字排序
#浏览器标签栏小图标
favicon: /favicon.ico
本地同步github
在github上new Repository,并命名为xxxxx.github.io(xxxxx是你github的账号名),然后把本地项目提交到github的远程项目。然后在浏览器上输入xxxxx.github.io就能访问自己的博客了。
同步到github,发现网站访问不了。经测试不是主题的问题。
个人建议不通过手动同步github,优先考虑通过修改_config.yml让hexo帮助我们同步github,方便快捷,配置如下所示:
deploy:
type: git
repo: https://github.com/xxx/xxx.github.io.git ( xxx为个人github的name)
branch: master
配置完后,运行
hexo deploy 或者 hexo d
如出现以下的错误:
ERROR Deployer not found: git
请运行以下命令进行安装:
npm install hexo-deployer-git --save
再次运行hexo deploy。工程同步成功!
与Github账户关联
首先需要去Github注册一个账号,并新建一个名为 [your_account].github.io 的仓库。
然后打开前面创建的MyBlog目录下的 _config.yml 文件,在修改最下方的deploy为:
*注意,冒号后面一定要加空格
deploy:
type: git
repo: gihub: https://github.com/[your_account]/[your_accout].github.io.git
branch: master
接下来安装hexo的git部署,在命令行中执行:
$ npm install hexo-deployer-git --save
最后,将生成静态页面并部署到github的仓库中,执行:
$ hexo d -g
或者
$ hexo generate
$ hexo deploy
当提示 ** INFO Deploy done: git 即上传成功,这时就可以通过 **http:\/\/[your_account].github.io 来访问你的个人站点了。
这里涉及了github pages的相关内容,有兴趣的可以去了解一下。
当你增加新的文章或者插件时,可以通过以下几个命令进行同步操作:
hexo clean
hexo generate (hexo g)
hexo deploy (hexo d)
hexo server (hexo s)
Mac - Hexo+GitHub轻松搭建自己的博客的更多相关文章
- 使用Hexo + Github Pages搭建个人独立博客
使用Hexo + Github Pages搭建个人独立博客 https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog ...
- Hexo + Github Pages搭建的个人博客
这个不算是新手的搭建流程,如果你恰巧看见这篇文章,希望你已经安装好node.git等软件,因为第一步的环境搭建准备并没有详写,默认都会了.希望能解决你的问题. 步骤: 一. 搭建环境准备 二.安装he ...
- hexo + Github Page 0元建立博客攻略
传送门: 5分钟 0元搭建个人独立博客网站(一):https://mp.weixin.qq.com/s/69isJE191WV2gaVbjrwTtw 5分钟 0元搭建个人独立博客网站(二):https ...
- 利用Github免费搭建个人主页(个人博客)
之前闲着, 利用Github搭了个免费的个人主页. 涉及: Github注册 Github搭建博客 域名选购 绑定域名 更多 一 Github注册 在地址栏输入地址:http://github.co ...
- 在Github上搭建自己的博客(Windows平台)
折腾了好久,终于在Github上搭建了自己的博客.这里面总结一下过程希望对大家能有所帮助. Github建博优缺点 和 csdn,新浪,网易相比,在Github上可以自己实现功能 和阿里云,VPS相比 ...
- 在Github上搭建你的博客
title: blog on github date: 2014-03-24 20:29:47 tags: [blog,github,hexo] --- **用Github写博文** 参考http:/ ...
- 在github上搭建免费的博客
github好多年前,大家都开始玩啦,我这个菜鸟近几年才开始.github不仅可以管理项目,还可以搭建博客.技术人员,一般用的博客为博客园,CSDN多一些.看到朋友们都弄一个,我也开始弄起来,先找点资 ...
- 如何用Hexo+Github创建自己的技术博客
注册一个github GitHub官网.按照一般的网站注册登录执行就好了,不详细说. 安装git 安装很简单,一直下一步 git安装教程 很多教程里都说要配置环境变量,我本人安装过5次左右的git,一 ...
- Hexo+GitHub Actions 完美打造个人博客
Hexo简介 Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架.大家可以进入hexo官网进行详细查看, ...
随机推荐
- python中,如有个非常长的字符串,在写的时候如何将其分隔
说明: 比如,有个长字符串,Put several strings within parentheses to have them joined together.但是我在写脚本的时候, 想要放在多行 ...
- 【12月06日】A股全市场情绪指标整理分析
1. A股全市场的股权质押比例 2018年11月30日,A股全市场,质押股数占全市场总股本数比:9.997%,最近2周出现了3.2%的轻微回落.同历史时期相比,仍然处于高位. 2. A股全市场的解禁市 ...
- Dubbo原码解析(version:2.5.3)
一.启动dubbo借助spring的schemas来启动(dubbo.jar/META-INF/spring.schemas).在dubbo.jar/META-INF/spring.handlers里 ...
- 安装centos6.5
我是在虚拟机上面安装的centos6.5,本机的系统是windows 2008 datacenter. 到这个地方下载镜像文件:http://mirrors.sohu.com/centos/6.5/i ...
- Python easyGUI 登录框 非空验证
import easygui as g msg='欢迎注册' title='注册' fieldNames=['*用户名','*密码','*重复密码','真实姓名','手机号','QQ','e-mail ...
- WAF Bypass数据库特性(MSsql探索篇)
0x01 背景 探索玩了Mysql特性,继续来探索一下MSsql特性. 0x02 测试 常见有5个位置即:select * from admin where id=1[位置一]union[位置二]se ...
- mysql 外键约束示例
-- 创建测试主表. ID 是主键.CREATE TABLE test_main ( id INT, value VARCHAR(10), PRIMARY KEY(id)); -- ...
- Python中执行外部命令
有很多需求需要在Python中执行shell命令.启动子进程,并捕获命令的输出和退出状态码,类似于Java中的Runtime类库. subprocess模块的使用: Python使用最广泛的是标准库的 ...
- error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version
更新的软件可以解决 TortoiseGit-preview-2.5.7.0-20180127-b2d00f8-64bit.msi和Git-2.16.2-64-bit.exe. 链接地址为: https ...
- maven默认本地仓库目录
C:\Users\${姓名}\.m2\repository\