快速搭建博客教程,github&hexo
经过好一会的折腾,终于搞定了属于自己的第一个博客的搭建。其中遇到了一些问题,踩了一些坑,特别感谢@崔斯特 的帮助。先贴上成果无小意的博客
一、前奏
- 搭建自己博客的原因
- 看过的网站千千万,为何不能拥有一个自己的网站?
- 曾经经历过莫名其妙的文章删除,害怕以后丢失文章信息
- 自由自在的发表,随心的改造
- 整个过程的时间
- 最开始是参考@崔斯特 的文章参考文章,看完后有了自己完成一个博客的冲动。
- 用了大概两个下午的时间,第一天完成了第一个主题,第二天完成第二个主题。
- 环境配置
- windows 8 64位系统,sublime编辑器,git bush
- 缺啥再补啥
- 博客搭建
- 采用hexo框架进行网站代码的构建,再部署在免费的github上。
- hexo此次安装重要文档
二、GitHub配置
- 登录GitHub(没有的就注册地一个)
- 保留自己Username,保留网页或者粘贴下来。
- 主页中点击右上角自己的图标,点击your profile
- 点击repositories,新建一个
- Repository name (填自己的名字) yourname.github.io(yourname与你的注册用户名一致,这个就是你博客的域名了)
三、环境配置
- 安装Node.js
- 安装Git
- 安装完成后,在开始菜单里找到“Git”->“Git Bash”,进入
- $ git config –global user.name “username”
- $ git config –global user.email “xxx”
- cmd中输入npm install -g hexo-cli(管理员权限)
- (npm在你安装Node.js时就安装了)这个过程会比较久,如果出现WARN错误可以忽略。我记得当时,每次都会出现说有一个依赖包已经不更新,这个不影响。
四、网站代码以及设置
- 自己在C盘创建一个test文件夹,cmd内cd进入test文件夹(管理员权限!一定得有)
- 输入hexo init blog(此处如果出现了两三个WARN错误忽视就行,不影响)
- _config.yml,网站的 配置 信息,您可以在此配置大部分的参数。
- source,资源文件夹是存放用户资源的地方。除 posts 文件夹之外,开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
- themes,主题 文件夹。Hexo 会根据主题来生成静态页面。
- 等待提示Start blogging with Hexo,就是安装成功了
- 文件夹中自带一篇文章“Hello World”
- 命令行进入blog目录下
- 输入hexo g,生存静态文件
- 输入hexo s,启动服务器。默认情况下,访问网址为: http://localhost:4000/
- 重新打开CMD,输入:ssh-keygen -t rsa -C “Github的注册邮箱地址”
一直Enter过来,得到信息:
Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.
- 找到该文件,打开(sublime text),Ctrl + a复制里面的所有内容,然后进入Sign in to GitHub:https://github.com/settings/ssh
- New SSH key ——Title:blog —— Key:输入刚才复制的—— Add SSH key
五、博客网站配置信息
- 进入blog网站,用sublime打开_config.yml文件(博客基本配置信息),修改参数
- 终极,特别,提醒。每个参数的:后都要加一个空格(这个坑踩的我头晕)
hexo框架的blog基础信息,按照自己设置就行
1
2
3
4
5
6title: 无小意的博客
subtitle: 不想再犹豫。
description: 数据分析之路上~
author: 无小意
language: zh-CN
timezone: Asia/Shanghai部署服务器的相关配置信息,只需要修改repo部分,username设置为你的username
1
2
3
4deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: master各类主题的配置信息,要在主题文件夹内的_config.yml上进行配置!
六、发表文章
- 进入blog文件夹下,输入hexo new “Hello blog”
- 打开info中的地址,打开文件。
- 文章内容采用Markdown语法进行编辑,需要用相关软件才能打开这个文件
- Markdown编辑使用说明
1
2
3
4
5
6
7---
title: Hello blog
date:
tags: 测试
---
测试文章,欢迎关注作者博客: https://wuxingggg.github.io/
虽然啥子都没有,以后慢慢补充执行以下步骤
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16C:\test\blog
$ hexo clean
INFO Deleted database.
INFO Deleted public folder.
C:\test\blog
$ hexo generate
INFO Start processing
INFO Files loaded in 1.48 s
...
INFO 29 files generated in 4.27 s
C:\test\blog
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
7.http://localhost:4000/ 打开后检查,没问题后部署到服务器上1
2
3
4C:\test\blog
$ hexo deploy
INFO Deploying: git
...
其中,可能会出现github登录界面,正常填写就行
hexo deploy 后,出现 error deployer not found:git 的错误,输入以下代码
npm install hexo-deployer-git –save
再次hexo deploy
“Hello Blog”
七、主题设置
主题设置中,最好玩的就是尝试各式各样的主题啦~
官方hexo主题大全,里面有许多主题都能尝试一下。
在这里推荐几个主题:
- next官网,Git
- Material官网,Git(我用的就是这个啦,十分推荐!)
- 主题配置,首先要下载主题,到相应的Git链接,比如,Material下载Source code (zip)
- 下载完以后将文件解压缩后放到blog中的themes文件夹中
- 修改主题文件夹名称,将其改为 material 。 然后打开 站点配置文件,找到 theme 字段,并将其值更改为 material
- 手动将 material 文件夹中的 _config.template.yaml 复制一份并重命名为 _config.yaml
- 接下来,打开主题相应的博客中的文档说明,对比“主题”中的_config.yaml,针对自己需要的功能进行相关设置
- 有关设置中的图片,统一放到主题文件夹内\source\img。在设置中,用”/img/xigua.jpg”类似格式进行图片设置。
- 设置时切记 : 后面要加一个空格。这个坑有点恼人~
- 最后再重新进行一次,hexo clean,hexo g,hexo s,hexo,deploy 整个博客就完成主题修改啦
八、总结
- 用了一些时间,完成了自己第一个博客的搭建,感觉还是蛮爽的,有兴趣的朋友可以立马试试。
- 这次搭建自己的博客,过程中经常需要到百度搜索各种各样信息和问题,遇到一个解决一个就好了。
- 了解到了,有关SSH密匙,npm包管理工具,网站搭建流程,评论功能设置,服务器部署,hexo框架的文档,blog各类功能的配置设置。
- 发布文章时用到了Markdown,现在也顺便练习一下用法。
- 知乎的文章往博客转移不太方便,得另外用Markdown再写一遍。
搭建一个简单的博客,还是挺简单的,花点时间琢磨一下肯定能出成果。
期末又要来了,寒假还要尽量找份深圳的实习,有空再写一下有关数据分析的文章。
This blog is belong to 无小意
本文链接:https://wuxingggg.github.io/2017/12/22/第二篇/