用coding创建属于你的blog
用coding的优势:
| 项目 | coding | gitee | github+netlify |
|---|---|---|---|
| 速度 | 快 | 目前有点慢(估计会好) | 较快 |
| 自定义域名 | 免费 | 一年七八十 | 免费 |
| 自动部署 | 可以 | 不可以 | 可以 |
| 免费私人仓库 | 可以 | 可以 | 不可以 |
这大概是小白也能看懂的文章了.
你所需要的: 一台电脑,一个突破舒适区的心态
安装所需工具
- npm(如果之后打算继续干这方面的话推荐安装nvm[版本管理])
- git
- hexo
安装nodejs\npm
<details>
<summary>展开查看</summary>
- GNU/linux
如果要源码编译的童鞋可以:
git clone https://github.com/nodejs/node.git
chmod -R 755 node
cd ./node
./configure
make
sudo make install
像debian衍生的可以用sudo apt install node
如果是arch的话
由于arch是滚动更新的,往往nodejs更新非常快
为了尽量避免出现兼容问题,可以安装nvm
sudo pacman -S nvm
nvm install node
当然你也可以安装长期支持版
sudo pacman -Ss nodejs-lts
不过用arch的一般都不会看到这篇文章了吧..
-
windows
- 请到node官网下载并安装程序
- 安装完成后检查是否安装好:
1.在桌面任意位置按住shift键右键桌面,你会发现菜单里出现了:在此处打开powershell或者在此处打开cmd(取决于你是win10还是win7)
2.在powershell(或cmd)中输入node -version和npm --version(由于由于新版的NodeJS已经集成了npm,所以你会有两个啦)
-
mac
可以使用homebrew安装
brew install node
</details>
安装git
<details>
<summary>展开查看</summary>
-
GNU/linux
同样,对于debian衍生版:sudo apt install git
对于archlinux:sudo pacman -S git -
windows
- 去下载一个git
- 安装好后你可以看到鼠标右键菜单里多了两行:
git bash here和... - 你可以点击
git bash here或者打开powershell\cmd - 输入git --version
-
mac
命令brew install git
</details>
安装hexo
在终端里键入命令npm install hexo-cli -g
用hexo开启你的博客之旅
在你想要的目录下创建一个blog目录(名字随便取啦),进入这个目录,打开终端,键入以下命令:
hexo init
稍等一会,你会看到目录下多出了以下内容:
~/文/m/demo ❯❯❯ tree -L 1 --dirsfirst 10:03:04
.
├── node_modules
├── scaffolds
├── source
├── themes
├── _config.yml
├── package.json
└── package-lock.json
4 directories, 3 files
其中package.json是hexo init生成的,用于让npm安装所需要的插件,这些插件安装在
node_modules这个目录里,你以后在blog根目录下安装的插件也会自动装在这里.
scafolds目录用于存放模板,等一下我回来介绍它
source目录用于存放文章(./source/_post/)和分类
themes目录用于存放主题,你可以往里面放主题,我接下来也会介绍它
_config.yml这个配置文件是用来配置你的博客的,比如仓库地址什么的,
主题文件里也有一个_config.yml--它是来配置主题的
你可能要知道的词语博客的跟目录(你刚才创建的博客的地址);主题根目录(你主题的地址,之后会提到)
基本了解了下hexo的目录之后我们就要创建一个远程仓库了,用于搭建我们的网站
用coding创建一个远程仓库
这里是coding官网,去创建一个团队(相信大家都注册的来)
然后就是创建一个仓库了:
42
2
项目名称什么的随便你填.
3
这串仓库地址我们等下要用到.
hexo配置修改
到你刚才创建的blog目录下面,修改根目录下的_config.yml文件
这里有个注意点:yaml的格式是xxx: xxxx,在:后面有个(空格).
示例:
# 第5行开始
title: PowerScript # 你站点的名称
subtitle: Geek on the way # 站点的副标题
description: 慷慨付出的，便是经常得到的 # 站点的描述
keywords: powershell # 站点的关键词
author: 卡夫卡的虫 # 你的名字
language: zh-cn # 网站的语言
timezone: # 时区,不设置没关系
# 第96行
theme: Sakura # 这里设置你的主题
# 在文件的末尾找到这里
# 用于发布到运程仓库
deploy:
type: git
repo:
#可以部署到多个远程仓库,格式如下
# github: git@github.com:Rubbybutton/demo.git
coding: git@e.coding.net:rubbybutton/demo.git # 粘贴上上文你拷贝下来的
branch: master # 部署到的分支名称,默认master就可以了
更多的配置自己去研究了,这里能用即可
快速发布
本地预览
在你博客的根目录打开终端,输入以下命令:
# 如果你打开的是cmd或者git bash
hexo clean && hexo g && hexo s
# 如果你打开的是powershell
hexo clean ; hexo g ; hexo s
你会看到如下内容:
45
按住ctrl鼠标单机下划线部分就可以快速在浏览器打开了(或者直接在浏览器输入地址即可)
是不是很帅?
我来讲下命令的意思:
hexo clean是用来清除过程文件的(没用的文件)
hexo g就是根据配置生成文件(generate)
hexo s是在本地开启一个服务,供我们本地预览(server)
发布到仓库
现安装插件hexo-deployer-git使我们可以发布:
# 在博客的根目录下
npm install hexo-deployer-git --save
执行命令hexo clean && hexo g && hexo d
所谓的hexo d就是deploy(部署),发布到远程仓库
执行后我们再到刚才创建的仓库(可以看到已经有了内容):
12
我们现在需要打开仓库的page服务,来显示我们的网站:
13
14
15
17
然后就可以访问我们的博客了!
23
是不是很棒?
使用其他主题
你可以到hexo主题库里找到你想要的主题,然后把主题放在你博客的根目录/themes/下.
如我下载了一款NexT的主题,那么就是blog/themes/sakura/这个路径叫做主题的根目录
你可以根据需要(按照主题开发者的教程)修改主题根目录下的_config.yml文件.
<details>
<summary>展开查看图片</summary>
46
</details>
进阶使用
写新文章
你可以用hexo new <file_title>来生成文章(为什么这么做嫩?直接创建一个文件不久好了吗?原因是你可以自定义文章模板咯!)
记得之前的讲的目录结构吗?
我们可以给博客根目录/scaffolds/下创建一个模板文件demo.md(名字随你)
写入以下内容:
---
title: {{ title }}
date: {{ date }}
author: 卡夫卡的虫
avatar: http://wep220.coding-pages.com/powerscript/avator.jpg
authorLink: http://ejs8w0.coding-pages.com/
authorAbout: 慷慨付出的，便是经常得到的
authorDesc: 慷慨付出的，便是经常得到的
categories: ps1
comments: true
tags:
keywords:
description:
photos: https://cdn.jsdelivr.net/gh/Rubbybutton/cdn/24.png
---
你下次生成文件就可以用hexo new demo <file_title>来在/source/_posts/下创建一个文件,而且文件是按照这个模板的
你可能还需要的东西
必备类
- markdown写作语法(网上教程很多)
美化类
进阶类
本文由博客一文多发平台 OpenWrite 发布！
网友评论