美文网首页
使用Github和Hexo搭建博客

使用Github和Hexo搭建博客

作者: Viavie | 来源:发表于2017-05-21 09:19 被阅读0次

小提示:搭建Hexo博客是一个需要耐心的工程,可能哪步出错了就卡了很长时间找不到原因,这个时候利用百度和Git的报错推断原因往往是有效的

这个是Windows平台的搭建教程,运行的Win10 64位系统

本文如果有任何不对的地方欢迎各位进行批评指正,感激不尽!

注册Github

注册并完善信息

注册地址 注册的时候建议使用便于记忆的、简便的用户名(不要使用大写字母,建议使用小写字母和数字)

github注册github注册

注册的时候可能遇到的一中情况就是用户名已经注册过了,这个时候更换用户名即可

sign up already takensign up already taken

这一步继续即可,点击Continue(针对个人需求不大的用户)

ContinueContinue

第二步选择计划,做了一份中英对照,懒人也可以选跳过试试,反正我没有选过

welcome to Githubwelcome to Github

验证邮箱

点击Start a project,这个时候会让你验证邮箱所有权

start a projectstart a project

这个时候去你的邮箱查看验证邮件,并验证即可

Email settingEmail setting

在邮箱中验证

Email verifyEmail verify

创建博客所需仓库

验证成功会再次弹出这个页面,点击Start a project即可

按照下面的填写即可,但注意仓库名前缀一定要和用户名保持一致,README.md文件建议勾选(可以不勾)

Creat a new repositoryCreat a new repository

创建好之后大致就是这样,没有勾选README.md的同学不会显示下面的README.md文件的内容:viashow.github.io

创建成功创建成功

安装Git和Node.js环境

安装Git

首先下载git和node.js安装包,我使用的是git-2.12.0-64bit的exe安装文件和node-v6.10.3-64bit的msi安装文件

百度网盘下载地址链接挂了联系作者补链,建议QQ

Git官方下载

Node.js官方下载

git的安装流程一路next就行

git installgit install

安装Node.js

Node.js的安装流程也是一路Next,然后Finish,就不贴图了

配置Git

这个时候你的右键菜单会有两个关于Git的选项,一个Git Gui Here,一个Git Bash Here,在这里我们要用的是第二个

配置SSH Key

配置这个是为了解决本地文件上传到Github的问题(让Github确认你是它的用户),使用ssh是为了安全,这时你要确认自己用户目录下.ssh\不存在rsa文件,否则可能起冲突,如果有就删除

用Git Bash执行以下命令

这个时候要注意,git中复制的快捷键为Crtl+Insert,粘贴的快捷键为Shift+Insert,当然复制粘贴也可以使用鼠标右键,但代码一定要粘贴在$之后,且$和代码之间不能留空格

ssh-keygen -t rsa -C "240313001@qq.com"
ssh1ssh1

打开rsa文件存放路径,找到id_rsa.pub文件,使用记事本或者Notepad++打开该文件并复制内容

Github添加SSH keys页面>>New SSH key>>

ssh2ssh2

最后效果如下

ssh3ssh3

测试是否配置成功

ssh -T git@github.com #不要拿自己的邮箱换掉git@github.com !!!
ssh4ssh4

向Github自报家门

配置完成后,还需要最后一步设置,在Git Bash输入

git config --global user.name "your name" #引号内替换为自己的用户昵称,比如我的是via show
git config --global user.email "email@email.com" #引号内替换为自己的注册邮箱
自报家门自报家门

安装和配置Hexo

我的选择是独自分出来了一个13G大小的磁盘分区单独放Hexo文件(其实不用这么大,够用就行)

配置Hexo命令和环境

首先在桌面右键(应该是Node.js安装在哪个盘就在哪个盘Git Bash)Git Bash,这个时候会跳出来Git的窗口,我们要做的就是在这个窗口里执行命令

首先执行(使用npm安装Hexo)

npm install -g hexo-cli
install hexoinstall hexo

安装后显示如下,无视WARN,一般不影响后续操作

install hexo1install hexo1

提取Hexo

安装Hexo完成后,打开磁盘分区,右键空白处,选择Git Bash Here

Git Bash HereGit Bash Here

这个时候会跳出来一个Git的窗口,在这个窗口里依次执行以下代码(#号以及后面的是注释,不执行)

hexo init hexo #新建Hexo文件夹
cd hexo #进入Hexo文件夹
npm install #安装npm
git windowgit window
hexo init hexo
install hexo2install hexo2
cd hexo
install hexo3install hexo3
npm install

执行完这一步,本地基本配置成功了

npm installnpm install

运行测试Hexo

接下来执行

hexo g && hexo s #生成静态文件&&运行本地服务

看到红框内的字说明本地博客运行成功,按照红色字操作即可(Ctrl+C停止本地服务)

install hexo5install hexo5

在浏览器地址栏输入localhost:4000回车,你的站点配置好啦!

hexo runninghexo running

修改Hexo配置文件

找到Hexo文件夹下的_config.yml文件,使用Notepad++打开

注意:Hexo的_config.yml文件分为两种,一种是站点配置文件(在Hexo根目录下),一种是主题配置文件(在themes文件夹内的主题文件夹下),在这里我修改的是站点配置文件

各个参数和参数值之间默认留有一个空格,如果没有留有空格可能发生未知错误,如"title:Via Show"是不对的,正确写法应该是"titile: Via Show"

Hexo官方配置文档

下面是我的配置留作参考

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

# Site
title: Via Show
subtitle: #副标题,自己填写
description: 质朴通明,自由随心 #网站简介
author: Viavie
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: https://viashow.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: :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: git
  repository: git@github.com:viashow/viashow.github.io.git
  branch: master

使用主题

由于各个主题的配置文档不同,这个步骤请读者自己配置摸索

上传到Git

执行以下代码(请在Hexo根目录使用Git Bash)

npm install hexo-deployer-git --save #安装上传插件
hexo clean && hexo g && hexo d #清除缓存文件&&生成静态文件&&上传部署网站
安装git上传插件安装git上传插件

打开浏览器,在地址栏输入https://viashow.github.io,我的成功了

viashow is okviashow is ok

绑定个人域名

阿里云操作案例

我使用的是阿里云购买的域名,在阿里云进行解析,其他平台可以进行参考

控制台>>域名与网站>>云解析DNS>>解析>>

添加两个A记录类型一个CNAME记录类型,如图填写即可,但要拿自己的github站点把我的viavie.github.io替换了

域名解析设置域名解析设置

A记录类型的记录值也可以拿自己ping出来的地址填写,打开cmd

ping https://你的昵称.github.io #把ping出来的ip填到记录值里,填写一条两条A记录类型都没有影响

有的同学问为什么不用备案,我师父的解释是,你使用的是github的服务器,怎么备案?

建立CNAME文件

在\hexo\source文件夹下新建一个txt文档,重命名为CNAME(注意,没有后缀txt),使用Notepad++编辑,填写内容为你的域名(不带www,比如我的是viavie.top)

cnamecname

想要使配置生效,需要重新上传,执行以下代码

hexo clean && hexo g && hexo d

附录

原文链接

Hexo官方文档

[廖雪峰Git使用教程](![](file:///C:\Users\DELL\AppData\Roaming\Tencent\QQ\Temp%W@GJ$ACOF(TYDYECOKVDYB.png)http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/)

Markdown软件Typora

Hexo命令及Markdown语法

问题

Git如何避免”warning: LF will be replaced by CRLF“提示?

LF will be...CRLFLF will be...CRLF

最近更新:2017/5/20 15:42

相关文章

网友评论

      本文标题:使用Github和Hexo搭建博客

      本文链接:https://www.haomeiwen.com/subject/jsymxxtx.html