Sanakey

从零开始的免费建站教程Github Pages+Hexo
Github Pages和Hexo简介Github Pages 其实本身就是 Github 提供的博客服务。 ...
扫描右侧二维码阅读全文
26
2018/06

从零开始的免费建站教程Github Pages+Hexo

Github Pages和Hexo简介

Github Pages 其实本身就是 Github 提供的博客服务。 你可以理解为github免费提供给你的服务器。

  • 有过建站经验的小伙伴应该都清楚,如果自己想搭建一个属于自己的网站,首先得有一个服务器给你保存数据,购买了服务器之后,服务提供商会给你提供一个服务器的ip地址,此时你只能通过ip地址对你的服务器进行访问,如果你想通过类似于baidu.com的域名形式对自己的服务器进行访问,你还需要购买一个域名地址,而Github Pages免费给你提供了服务器和域名两项服务。
  • 服务器和域名都搭建好后,如果不是刻意想从零实现网站的每个页面,大部分人都会选择使用类似于WordPress的框架,而Hexo就是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

好了,简单的介绍完了,接下来开始正式建站。

使用Github Pages

注册 Github 账号, 进入注册,然后在 Github 中创建一个以 .github.io 结尾的 Repository。
image

  1. Repository name: 你的github用户名.github.io
  2. 勾选 Initialize this repository with a README
  3. 点击Create repository
    image

系统环境配置

在安装Hexo前,你的系统需要支持Nodejs以及Git,如果还没有,那就立刻开始安装吧!

下载安装Node.js

安装Node.js教程

下载前往Node.js

下载安装Git

下载地址:http://git-scm.com/download/

下载成功后,打开程序然后按默认选项安装即可。
git相关教程

生成SSH密钥

git安装成功后,在桌面右键,点击git bash here,此时会打开一个类似于cmd命令行一样的窗口,此时我们要在本地创建ssh key,(这个key相当于通行证),命令行输入

ssh-keygen -t rsa -C "你的邮箱地址"

"你的邮箱地址"改为你在github上注册的邮箱,之后会要求确认路径和输入密码,我们这使用默认的一路回车就行。

成功的话会在C:UsersAdministrator文件夹里生成.ssh文件夹,得到两个文件id_rsa和id_rsa.pub。打开id_rsa.pub,复制里面的key。

在GitHub上添加SSH密钥

回到github上,进入 Account Settings(账户配置),https://github.com/settings/keys,点击右上角New SSH Key,title随便填,粘贴在你电脑上生成的key。

好了,此时你的电脑和github账号的通道就建立好了,你可以提交本地数据到github上了。

使用Hexo

安装hexo

命令行输入

npm install -g hexo-cli

回车,等待系统安装,安装完成后

继续输入

hexo -v

如果能看到版本号说明安装成功。

初始化hexo

在D盘新建一个blog文件夹,在此文件夹内右键,git bash here,依次输入下面的命令,每输入一行按一次回车

hexo init  //将 blog 文件夹初始化成一个博客文件夹
npm install  //安装依赖包
hexo g  //生成网页
hexo s  //将生成的网页放在本地服务器,默认端口是4000

在浏览器输入http://localhost:4000/ ,回车就可以看到效果了。

如果想关闭服务器,按Ctrl+C可以退出,关闭命令行窗口也可以退出。

发布博文

如果你刚才没有关闭命令行窗口,继续输入命令

hexo new "文章标题,可以自定义"   //新建一篇文章

此时在你的D:blogsource\_posts文件夹内,会看到一个"文章标题,可以自定义.md"文件。

title: 文章标题,可以自定义
date: 2018-06-30 09:00:00 #发表日期,一般不改动
categories: hexo #文章分类
tags: [hexo,github] #文章标签,多于一项时用这种格式
---
正文,使用Markdown语法书写

使用文本编辑器打开(建议使用支持markdown语法的编辑器),就可以使用markdown语法进行文章的书写了,如果不懂markdown语法,请点击这里学习

保存之后退出,使用命令

hexo g   //生成网页
hexo s   

再次前往 http://localhost:4000/ 查看,此时可以发现刚才新建的文章成功添加了。

将本地Hexo博客部署到Github上

打开d/blog/_config.yml文件

找到#Deployment,修改为

deploy:  
      type: git  
      repository: 你创建的博客项目的github地址.git  
      branch: master

注意,这里有几个坑

  • 配置文件名“:”后要加一个空格,否则会报错;
    image
  • repository这里最好使用项目的git地址,比如我的就是git@github.com:Sanakey/Sanakey.github.io.git,你可以在自己的github项目里点击图中的按钮复制该地址
    image

保存后退出,安装 hexo-deployer-git,输入命令

npm install hexo-deployer-git --save
hexo g -d  //生成网页并部署

看到返回INFO Deploy done: git,说明部署成功

在浏览器输入你的github用户名.github.io,查看自己的博客网站吧!

关于主题等高级技巧,我们下次再聊~~!

附录

hexo常用命令

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

简写

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

全局配置 _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-CN #语言,这里使用中文就行
# 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
  repository: 你创建的博客项目的github地址.git 
  branch: master

关于Hexo

想了解更多关于Hexo的内容,请点击查看
官方中文文档

Last modification:November 3rd, 2019 at 03:57 pm
如果觉得我的文章对你有用,请随意赞赏

2 comments

  1. Sanakey Google Chrome 83.0.4103.116 Windows 10

    图床挂了,没备份,gg

  2. WhatZ Google Chrome 78.0.3904.116 Windows 10

    dalao,图片挂了

Leave a Comment

flandre.png