我是如何搭建属于自己的博客的（Hexo+Github）
2018-07-27 本文已影响0人
xu_chen
我的个人博客链接：https://sunrisechen007.github.io/
写博客的目的
- 培养自己的写作和总结能力
- 记录自己开发中实际遇到的问题，希望也对他人有所帮助
- 给自己一个挑战，督促自己
写博客的方式
- CSDN、博客园、简书等平台，提供了框架，直接在里面写文章即可； 优点： 简单方便 缺点：样式固定
- 使用 Github Page + Hexo 自己搭建博客；优点：样式自由，不再受限于各大平台（自由） 缺点：有一定的技术门槛，相对麻烦些
我看大神们的博客貌似都是用Hexo写的，我也参考他们搭建了一个，下面是步骤👇
搭建过程一般分为以下几步
- 安装
Node.js- 安装
Git软件- 配置
Hexo- 关联
Hexo、Github Page- 写博客、发布文章
- 优化：更换主题。。。
一、安装 Node.js
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以在非浏览器环境下，解释运行 JS 代码
- 作用是用来生成静态页面的
- Node.js官网（http://nodejs.cn/）下载相应平台的最新版本，一路安装即可
二、安装 Git
- Mac系统自带Git这不需要操作，可使用 终端命令 git - -version 查看版本
三、配置 Hexo
Hexo是一款基于Node.js的静态博客框架，不仅可通过 Markdown 编写文章，还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容，生成静态网页。
官网地址： [https://hexo.io/zh-cn/] (https://hexo.io/zh-cn/)
配置过程:
- 在合适的位置新建文件夹，如 hexo；
cd命令进入到该文件夹内- 执行命令安装 Hexo：
sudo npm install -g hexo- 初始化 hexo：
hexo init（到这步，全部的安装工作已经完成！hexo就是你的博客根目录，所有的操作都在里面进行。 ）- 生成静态网页：生成前清除下缓存：
hexo clean，hexo generate（hexo g也可以）- 启动动本地服务，进行文章预览调试：
hexo server- 浏览器输入 http://localhost:4000 就可以看到你的博客样式啦，后面还需把它发布到 Github
四、关联 Hexo、Github Page
配置 Github: 登录你的git账号，新建 repository ，名称格式必须为 yourname.github.io ，在浏览器输入该这地址就可以看到你的博客了
- 修改 _config.yml文件
用sublime/notepad++等文本编辑器打开_config.yml，修改参数信息,拉到最下面，修改deploy为以下代码，repository后面的是你的仓库地址
deploy:
type: git
repository: https://github.com/elfwalk/elfwalk.github.io
branch: masters
- 修改相关网站信息
title: wangwlj 测试所用博客
subtitle: 积跬步以至千里！
description: 网页描述
author: wangwlj
language: zh-CN
timezone: Asia/Shanghai
五、最后一步，发布到远程 hexo deploy
其中会跳出
Github登录，直接登录，如果没有问题，在浏览器输入yourname（换成你的）.github.io/ 就可以看到了 (有可能稍有延迟）
六、 发布更新博客
hexo d -g
七、错误记录
deploy not found： git
执行命令 ： npm install hexo-deployer-git —save ，重新部署
八、优化
- hexo生成博文插入图片：[https://blog.csdn.net/sugar_rainbow/article/details/57415705] (https://blog.csdn.net/sugar_rainbow/article/details/57415705)
- 更换主题：直接
clone主题的git地址即可,在配置文件找到 theme 后面参数 改为 next，重新部署，每个主题的布局如何都是不同，具体如何排版需要根据说明文档做出修改markdown语法学习地址： http://wowubuntu.com/markdown/#list- 购买域名： 可使用阿里云的 https://wanwang.aliyun.com/?utm_content=se_1101812
- 美化网页： https://blog.csdn.net/DreamcoffeeZS/article/details/79401109
- 最主流的主题使用文档：Next主题配置
