利用Github+Hexo轻松搭建个人博客

利用Github+Hexo轻松搭建个人博客

准备工作

需求

  1. 申请一个域名,搭建一个博客站点。别人可以通过该域名访问我们发布的博客等
  2. 不需要我们维护服务器,我们只需要关注发布内容,极大降低技术要求

分析

Github:github提供gh-pages服务是免费的,可以为我们提供存储服务
Hexo : 一个快速,简单且功能强大的博客框架,帮助我们快速简单的搭建个人博客
MarkDown :是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式

技能提高

  • html+css+javascript
  • git基本语法
  • markdown语法
  • node.js

软件安装

以下为windows环境,其他环境安装软件、命令自行查询。已安装过的用户略过。

  1. 下载安装Git

  2. 下载安装Node.js

  3. 安装Hexo

    在安装git后,在任意位置点击鼠标右键,选择Git bash(我在D盘下新建Hexo文件夹后并点击鼠标右键操作)
    安装hexo npm install -g hexo
    创建hexo文件夹 hexo init
    安装依赖包 npm install
    启动hexo并测试 hexo server

启动之后,打开浏览器,在地址栏输入:http://localhost:4000,你会看到Hexo的示例页面

各种账号申请

已有的请直接跳过,我们将申请的各平台账号有:

  1. Github,博客托管
  2. 网易云跟帖 ,博客的评论系统(2017/08/01停止服务)
  3. 百度统计,域名的访问统计
  4. LeanCloud,统计文章阅读量

GitHub申请注册

输入账号、邮箱、密码,然后点击注册按钮.

创建页面仓库

这个仓库的名字需要和你的账号对应,格式: yourname.github.io
输入基本信息,然后点击创建仓库.


注意
命名规则:你的github账号.github.io

查看SSH

SSH 公钥默认储存在账户的主目录下的 ~/.ssh 目录。
进入.ssh 目录下,命令行:
ls 查看,如果返回:
something 和 something.pub ,说明已经有SSH 公钥。

生成SSH密钥

没有的话,生成,还是在.ssh目录下,命令行:
ssh-keygen -t rsa -C “你的邮箱地址”,按3个回车,密码为空。

在C:\Users\Administrator.ssh下,得到两个文件id_rsa和id_rsa.pub。

在GitHub上添加SSH密钥

打开id_rsa.pub,复制全文。https://github.com/settings/ssh ,Add SSH key,粘贴进去。

其他平台账号到后面在使用

Hexo初体验

使用next主题,强烈推荐按照官方文档操作,能完成你大部分的需求
http://theme-next.iissnan.com/getting-started.html

目录结构

├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

全局配置 _config.yml

# Hexo Configuration
# Docs: http://hexo.io/docs/configuration.html
# Source: https://github.com/hexojs/hexo/
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述,给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-Hans #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
  type: git
  repo: 刚刚github创库地址.git
  branch: master

发布博客

新建MarkDown 文件放在hexo\source_posts 下

常用的命令有

hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可以在 public 目录查看整个网站的文件
hexo server #本地预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**

本机查看,浏览器输入http://localhost:4000 查看你写的文章

hexo clean
hexo g
hexo s

推送至GitHub,先安装git插件npm install hexo-deployer-git --save

hexo clean
hexo g
hexo d

申请域名并绑定GitHub pages

我用的腾讯学生用户送的.cn域名,可以去godaddy购买,可以使用支付宝,具体可以百度。

以腾讯.cn域名示例,假设你已完成域名购买。

首先我们需要知道自己github pages的IP。电脑打开cmd
ping yourname.github.io 你就可以看到ip了。

然后在腾讯云的域名管理中设置域名的解析服务,添加记录。一个A类型,一个CNAME类型

完成绑定

方法一:在站点source目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如xxx.cn
方法二:在Repository的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如xxx.cn

提交更新,这样我们就可以通过域名访问自己的博客了

网易云跟帖

注册完成后,获取通用代码

把next主题中的gentie_productKey 后填入productKey的值即可,其他不需要修改。

参考资料


本文地址:http://blog.csdn.net/prodigalwang/article/details/74999822

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值