• 主页
  • 随笔
  • 技术笔记
  • 全部文章
标签 友链 关于我

  • 主页
  • 随笔
  • 技术笔记
  • 全部文章

Hexo搭建个人博客

阅读数:次 2014-05-01
字数统计: 1.8k字   |   阅读时长≈ 7分

hexo是一个基于Node.js的静态博客程序,优势是生成静态文件的速度非常快,支持markdown,速度快而且不容易出错,并且可以一键部署到github或者其它静态服务器上去

环境准备

1.安装brewhome

1
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)”

2.安装nodejs

1
brew install node

3.安装git

1
sudo brew install git

4.安装hoxo

1
npm install -g hexo-cli
1
2
3
4
5
6
hexo常用代码:
初始化新的hexo项目: hexo init
创建新文章: hexo n
构建静态文件: hexo g
开启本地server进行预览:hexo s 访问localhost:4000进行预览
部署到远程服务器: hexo d 或者 hexo g -d
  • 验证安装命令:
1
2
3
$ node -v : 验证 node 安装版本
$ npm -v : 验证 npm 安装版本
$ hexo -v : 验证 hexo 安装版本

5.检查并添加ssh key

1
2
3
4
5
6
7
8
9
10
cd ~/.ssh

备份:
mkdir key_backup
mv id_rsa* key_backup

生成ssh key:
ssh-keygen -t rsa -C "xxx@xxx.com"
测试连接:
ssh git@github.com

6.设置个人信息

1
2
git config --global user.name "xxx"
git config --global user.email xxx@xxx.com

初始化 Blog

  • 安装 Hexo 完成后,进入到存放Blog文件夹执行下列命令,会在文件夹中新建所需要的文件。
1
hexo init
  • 执行下列命令,可以查看在本地预览
1
2
hexo g // 生成静态页面
hexo s // 启动本地 blog 服务器
打开浏览器,在地址栏输入 localhost:4000,就可以查看本地博客了

注册Github帐号

已经有Github帐号跳过此步,首先进入Github进行注册,用户名、邮箱和密码之后都需要用到,自己记好。

创建Github Pages

  • repository相当于一个仓库,用来放置你的代码文件。首先,登陆进入Github,并进入个人页面,选择Repositories,然后New一个repository

  • 完成上述步骤后,会跳转到一个新的页面,此时你需要创建一个username.github.io格式的仓库,然后点击 Creat repository,如下图所示

  • 完成上述步骤后,便可以得到刚才新建的仓库地址,如下图所示。

仓库设置:

  • 在GitHub上打开你的仓库首页,单击设置(Settings)页签 打开左侧Pages

使用自动生成器生成GitHub Pages:

  • 下拉设置页面到GitHub Pages,单击Launch automatic page generator

选择主题:

部署本地文件到github

  • 既然Repository已经创建了,当然是先把博客放到Github上去看看效果。打开之前初始化好的Hexo Blog文件夹中的_config.yml文件修改以下配置:
1
2
3
4
5
6
7
deploy: 
type: git
repository: https://github.com/huangjunhui/huangjunhui.github.io.git
branch: master

url: https://ruixiaoguo.github.io/Grx.github.io/ (GitPage生成的那个链接)
root: ./
  • 配置好_config.yml并保存后,执行以下命令部署到Github上。如果你是第一次使用Github或者是已经使用过,但没有配置过SSH,则可能需要配置一下
1
2
hexo g
hexo d

执行上面的第二个命令,可能会要你输入用户名和密码,皆为注册Github时的数据,输入密码是不显示任何东西的,输入完毕回车即可。
此时,我们的博客已经搭建起来,并发布到Github上了,在浏览器访问huangjunhui.github.io就能看到自己的博客了。第一次访问刚地址,可能访问不了,您可以在几分钟后进行访问,一般不超过10分钟。

hexo的配置文件

hexo里面有两个常用到的配置文件:

  • 整个博客的配置文件hexo/_config.yml
  • 主题的配置文件hexo/themes/light/_config.yml

替换主题:

  • hexo官方提供了12个主题供你自己选择,使用方法很简单,点击自己想要的主题,进入该主题的Repository,使用Git将主题clone到本地

  • 然后将整个文件夹复制到themes文件夹下,将hexo/_config.yml里的theme名字改为自己下载的主题的文件夹名即可

接下来介绍整个博客的配置文件:
 # Hexo Configuration
 ## Docs: http://hexo.io/docs/configuration.html
 ## Source: https://github.com/hexojs/hexo/
 # Site    这下面的几项配置都很简单,你看我的博客就知道分别是什么意思
title: Chillax blog    #博客名
subtitle: Goals determine what you are going to be    #副标题
description: Goals determine what you are going to be #用于搜索,没有直观表现
author: huangjunhui    #作者
language: zh-CN    #语言
timezone:     #时区,此处不填写,hexo会以你目前电脑的时区为默认值

# 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: /
 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: :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
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: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
plugins:
- hexo-generator-feed
theme: light    #使用的主题

feed:    #之后配置rss会用,此处先不配置这个
type: atom
path: atom.xml
limit: 20  

# Deployment    用于部署到github,之前已经配置过
## Docs: http://hexo.io/docs/deployment.html

deploy: 
type: git
repository: http://github.com/huangjunhui/huangjunhui.github.io.git
branch: master

按照自己的意愿修改完后,执行hexo g,hexo s,打开localhost:4000看看效果

接下来介绍整个博客主题的配置文件:
menu:    #博客右上角的菜单栏,暂时使用默认值
首页: /
归档: /archives
关于: /about

#该类对应于E:\hexo\themes\light\layout\_widget下的文件
widgets:    #站点右边栏,可以参照我的博客看,暂时使用默认值
- intro        #简介
- search        #搜索
- category    #分类
- tagcloud    #标签云
- weibo        #微博
- blogroll    #友情链接



excerpt_link: Read more    #文章下的Read more,可以改为'阅读全文'

plugins:    #插件,暂时使用默认值

twitter:    #twitter
username:
show_replies: false
tweet_count: 5

addthis:    #SNS分享,暂时使用默认
enable: true
pubid:
facebook: true
twitter: true
google: true
pinterest: true

fancybox: true    #图片效果,使用默认值

google_analytics: 

rss:     #生成RSS,暂时使用默认值

使用macdown发布文章

  • 在hexo/source/_post中创建my-new-post.md文件,打开开始编辑

  • hexo中写文章使用的是Markdown,没接触过的可以看下Markdown语法说明,一分钟学会Markdown

1
2
3
4
5
6
7
title: my new post #可以改成中文的,如“新文章”
date: 2015-04-08 22:56:29 #发表日期,一般不改动
categories: blog #文章文类
tags: [博客,文章] #文章标签,多于一项时用这种格式,只有一项时使用tags: blog
---------------------------------------------------------
#这里是正文,用markdown写,你可以选择写一段显示在首页的简介后,加上
<!--more-->

在之前的内容会显示在首页,之后的内容会被隐藏,当游客点击Read more才能看到。

写完文章后你可以使用:

  • 1.hexo g生成静态文件。
  • 2.hexo s在本地预览效果。
  • 3.hexo d同步到github,或者(hexo g -d)快捷同步
  • 然后使用https://ruixiaoguo.github.io/Grx.github.io进行访问。
  • 本文作者: Grx
  • 本文链接: https://ruixiaoguo.github.io/Grx.github.io/Grx.github.io/2014/05/01/Hexo搭建/
  • 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!
  • hexo

扫一扫,分享到微信

深入Objective-C的动态特性
  1. 1. 环境准备
    1. 1.1. 1.安装brewhome
    2. 1.2. 2.安装nodejs
    3. 1.3. 3.安装git
    4. 1.4. 4.安装hoxo
    5. 1.5. 5.检查并添加ssh key
    6. 1.6. 6.设置个人信息
  2. 2. 初始化 Blog
    1. 2.0.0.1. 打开浏览器,在地址栏输入 localhost:4000,就可以查看本地博客了
  • 3. 注册Github帐号
  • 4. 创建Github Pages
    1. 4.1. 仓库设置:
    2. 4.2. 使用自动生成器生成GitHub Pages:
    3. 4.3. 选择主题:
  • 5. 部署本地文件到github
  • 6. hexo的配置文件
    1. 6.0.0.1. 接下来介绍整个博客的配置文件:
    2. 6.0.0.2. 接下来介绍整个博客主题的配置文件:
  • 7. 使用macdown发布文章
  • © 2014-2024 Grx
    GitHub:hexo-theme-yilia-plus by Litten
    本站总访问量次 | 本站访客数人
    • 标签
    • 友链
    • 关于我

    tag:

    • life
    • OC
    • Google
    • Fastlane
    • Flutter
    • hexo
    • 智能家居
    • Apple Watch
    • 逆向
    • Lottie
    • PHP
    • cocos2d
    • Mac
    • MonkeyKing
    • RN
    • Swift
    • RAC
    • WKWebView
    • WebView
    • Xcode
    • xcode
    • ios
    • Android
    • appledoc
    • MMKV
    • LLVM
    • FreamWork






      
      

    • 唐巧的博客
    • 王巍(喵神)OneVsDen
    • 阿里“念纪“
    • 滴滴-戴铭
    • 郭曜源(ibireme)
    • 阿里”南栀倾寒“
    • 蘑菇街李忠
    • 码农人生
    • 玉令天下
    • bang
    • Ian的博客
    这里是Grx的个人博客:
    iOS开发工程师一枚
    联系方式:
    QQ:1217255509
    Email:grx0917@sina.com
    知识管理,时间管理,自我管理,架构即未来
    欢迎技术交流!