zl程序教程

您现在的位置是:首页 >  工具

当前栏目

Mac - Hexo+GitHub轻松搭建自己的博客

GitHub博客Mac 搭建 轻松 自己 Hexo
2023-09-11 14:21:34 时间

     Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。官方文档传送门。Hexo的安装是个很快速简便的过程,但依然还是有不少坑。这里记录个我的安装过程(这是我的Hexo+GitHub+Next+Markdown个人网站),给大家一些参考。

 

整理一下安装流程:

1.hexo是基于nodejs的,需安装nodejs,安装nodejs最好选择homebrew

2.首先查看电脑是否安装ruby,因为homebrew安装依赖ruby

3.安装顺序: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 8 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: 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  ##定义每一页多少条博客  
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: 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
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: /404
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)