开发者社区> wzmyyj> 正文

Hexo+GitHub搭建个人博客网站

简介: 前言 今天,带大家利用Hexo和GitHub搭建属于自己的个人博客。 配一张图 Hexo Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
+关注继续查看

前言

今天,带大家利用Hexo和GitHub搭建属于自己的个人博客。

img_6b0e1c4a55cd93ec8ea6ea71bbb85753.jpe
配一张图

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页

img_16f6764ae6a5f4e2c8e190655a23cdb7.png
HEXO

传送门:Hexo官网中文文档

环境配置

1. 安装&配置git

  1. 访问git官网,下载git。

  2. 双击exe文件安装,一路next即可。

  3. 安装好git之后,配置用户名和邮箱。打开git-bash:

# 配置全局用户名
git config --global user.name "yourname"
# 配置全局邮箱
git config --global user.email "youremail@qq.com"

用户名和邮箱同你的GitHub(如果没有,去GitHub官网注册一个,注册好后记得邮箱验证才能使用。)

  1. 配置ssh。打开git-bash:
#输入,回车
ssh-keygen
img_51706b262784dfeabb79e089b27d0f34.png
git-bash

复制(右键+复制,不能ctrl+c,这里ctrl+c是结束命令的意思)图中的/c/Users/Administrator/.ssh/id_rsa,然后把它粘贴(右键+粘贴)到冒号后面,然后回车,回车,回车。。。直到结束(中间的冒号,除了第一个不用管只管回车)。

  1. github上生成ssh key,是本地Git绑定GitHub。
    网页上打开github -> 点击头像 -> Settings -> 左边菜单找到 SSH and GPG keys -> New SSH key(绿色按钮)-> title随便填(用英文)-> key值(打开/c/Users/Administrator/.ssh/id_rsa所在的文件夹,找到id_rsa.pub,注意是pub后缀那个文件,用记事本打开,复制里面的内容,粘贴到key值。) -> 点击下面的Add SSH key -> 完成。
img_43f69df0c6f6ab358f6c24c1bb932621.png
添加ssh key

2. 下载安装Node.js

  1. node.js下载地址
img_1639e58873528836bc00f6eebbc86c37.png
Node.js
  1. 安装步骤:一路默认就行(安装路径根据自己需要更改)

安装&使用Hexo

  1. 在D盘下(其他地方也可以)创建一个空文件夹(命名为你主页的名字或者HEXO,随便啦,这里以名为MyBlog为例)

  2. 打开cmd命令窗口(桌面任务栏最左边那个wins图标-> 搜索 -> 输入cmd ,回车)。切换到D盘:(输入,回车)D: -> 切换到刚才建的空文件夹:(输入,回车)cd MyBlog

  3. 安装Hexo

# 切换国内源
npm config set registry="http://registry.cnpmjs.org"
# 安装hexo
npm install -g hexo

等待安装完成。

  1. 初始化Hexo:
# 初始化Hexo
hexo init
# 安装必要模块
npm install

这时,MyBlog文件夹下就生成了一些文件。文件目录如下:

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

到此博客已经配置好了(虽然是默认的样子)

  1. 测试一下:
# 生成静态文件
hexo g // 或 hexo generate
# 本地测试
hexo s // 或 hexo server

然后浏览器上查看 http://localhost:4000

是不是可以看到一个简单的网页(如果不能,有可能是4000端口被别的程序占用了,自行百度解决方案)。

个性化

1. _config.yml文件

打开该目录下的_config.yml文件。(用什么软件打开?你可以用editplus或者vs 等,也可以直接用记事本,就是比较难看,建议下个editplus吧。)

修改成你想要的内容。

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 换成你的主页标题
subtitle: 主页副标题
description: 主页介绍的一句话
author: 你的名字
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://voidking.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
  auto_detect: 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: 5
pagination_dir: page

index_generator:
  per_page: 5

archive_generator:
  per_page: 500
  yearly: true  
  monthly: true 

tag_generator:
  per_page: 100 

category_generator: 
  per_page: 100 


# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: 你用的主题文件夹名字 # themes下的文件

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
    type: git
    repository: GitHub仓库地址
    branch: master

2. 修改主题

hexo官网主题中找一个喜欢的主题。

找到后,一般都有介绍怎么使用该主题的文章,如果没有,把网页拉到最下面。看到:2018 | Powered by Hexo Theme by Aath
点击Theme by 后面的连接,一般会简介到本主题在GitHub上的仓库地址。

根据说明,下载配置主题。

  1. 下载主题。比如:
# 切换到MyBlog文件下,cmd执行
git clone -b master https://github.com/lewis-geek/hexo-theme-Aath.git themes/aath

一般,它会自动下载到themes文件夹下。

  1. 跟换博客的主题:
    下载好后,你在_config.yml(主题是MyBlog文件夹下的)中的theme:处配置成你下在的主题名字(就是下载的主题文件夹名字 )

  2. 配置主题:
    根据GitHub上的说明配置themes/主题名目录下的_config.yml(不要与MyBlog的_config.yml搞混)。不同主题,配置起来不一样,所以在此不详解了。

发布到GitHub

  1. Github上新建仓库:
    打开GitHub网页,点击头像旁边的“+”号 -> New repository -> 填写名字(必须是:你GitHub的名字.github.io
img_37c7d604202e8cb2c61ef7185cdcc1a9.png
如图
  1. 本地配置Git:
    在MyBlog文件夹下的_config.yml配置(大约在底部位置):
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
    type: git
    repository: https://github.com/wzmyyj/wzmyyj.github.io.git
    branch: master
  1. 上传:
# 如果想把原来的清除
hexo clean
# 重新生成静态文件
hexo g
# 上传到提交文件
hexo d

第一次提交需要GitHub登录账号和密码。

上传完成后,浏览器打开:https://你的GitHub名字.github.io 就是你的博客主页地址了。(GitHub响应比较慢,刚上传需要等一小会才能打开最新的。)

写文章

  1. 新建一篇文章:
# 新建
hexo new post 文章名

Myblog\source\_posts目录下你将看到一个新建的文章名.md文件。

  1. 编辑文章:
    用editplus打开编辑,用Markdown格式书写。

保存时,记得把编码方式改成utf-8。Document -> File Encoding -> Convert Encoding...

建议用简书写(简书设置里把编辑器改成Markdown),然后复制过去。好处是图片存在简书上,访问起来快些。

  1. 上传:(和前面一样)
# 如果想把原来的清除
hexo clean
# 重新生成静态文件
hexo g
# 本地测试
hexo s
# 上传到提交文件
hexo d

到此,你的博客主页已经完成。


跟换域名

  1. 购买一个域名。(阿里云,腾讯云,万网均可注册购买域名)

  2. 修改你域名的DNS地址为 dns22.hichina.com, dns21.hichina.com

  3. 域名解析上,CNAME到你的GitHub名字.github.io

    img_241098dc6f302e785637a996b54ebf29.png
    域名解析

  4. 然后在你的本地站点目录里的source目录下添加一个CNAME文件。以文本编辑器打开CNAME,里面添加你的域名(不加http://)。

  5. 在MyBlog文件夹下的_config.yml配置url:

# URL
## If your site is put in a subdirectory, 
## set url as 'http://yoursite.com/child' and root as '/child/'
url: http://wzmyyj.top   //你的域名
  1. 重新生成静态文件和上传到GitHub。

附件

1. 参考文献:

Hexo环境搭建2018年5月版
搭建个人博客-hexo+github详细完整步骤
我的博客是如何搭建的(github pages + HEXO + 域名绑定)
Hexo中文文档

2. 我的主页:

欢迎大家浏览我的主页:http://wzmyyj.top/

img_8f3bd957fe19978ebbc51f1063aec2f8.png
wzmyyj的主页

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
用GitHub和Hexo搭建个人博客
很久前就想利用GitHub来搭建一个个人博客了,今天就琢磨了一下搭建方法,在这里写出来以供他人参考~ 一、简介 Hexo: Hexo 是一款基于Node.js、快速、简洁且高效的博客框架,Hexo 使用 Markdown解析文章,在几秒内,即可利用各式主题生成静态网页 NodeJs Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
1062 0
零基础安装wordpress,搭建个人博客!
总结一下使用wordpress搭建个人博客的三大步骤: 1.购买阿里云主机 2.选择安装wordpress镜像操作系统 3.安装配置wordpress 4.购买域名,配置域名解析 阿里云代金券1000元免费领取地址:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d 新老阿里云账户均可领取!可用于购买阿里云服务器ECS、云数据库RDS、虚拟主机、安骑士、DDoS高防IP等100多云计算产品。
2998 0
Docker DevOps实战: 一分钟搭建Hexo博客
本文简单介绍了如何利用Hexo镜像快速创建Hexo博客以及博文,需要用到阿里云容器服务产品。
6997 0
一、搭建篇-使用Github-hexo搭建个人博客教程—总结自己爬过的坑
一直想要拥有自己的一个博客,CSDN,那些又觉得不够个性化(主要是觉得逼格不够,哈哈) Github搭建博客的优点: 1、不需要域名和服务器 2、访问自己博客的时候没有广告 3、可以自己修改样式,能根据自己的需求加功能。
8625 0
Jekyll搭建个人博客 韩俊强的博客
 之前写了一篇HEXO搭建个人博客的教程获得了很好评,有很多读者主动给我打赏,在此感谢。  如果你看过我的文章会发现我现在的博客样式跟之前是有很大的区别的,之前我也是使用 HEXO 搭建的博客,后来发现使用 HEXO 在多台电脑上发布博客,操作起来并不是那么方便,果断就转到了 Jekyll 上,接下来我会讲如何使用 Jekyll 搭建博客,博客模板效果。
1560 0
怎么搭建Hexo博客?
相信大部分人使用Hexo搭建个人博客都会部署到一些免费的代码托管平台上,但这些免费的平台总是差强人意,比如国外的GitHub平台虽然完全免费,但在国内访问加载速度非常慢,又或者是国内的码云平台免费版有许多功能被阉割掉了,比如不能自定义域名,不能每次自动刷新提交的代码,需要到码云平台上手动刷新,如此一来非常繁琐。   为了有效解决上诉的一些问题,有条件的话,不妨在自己的云服务器上搭建Hexo博客。
750 0
+关注
wzmyyj
Let life be beautiful like summer flowers.
10
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载