嘘~ 正在从服务器偷取页面 . . .

Hexo搭建静态博客(一)——基础搭建


原来使用springboot自己捣鼓的博客,总是不够满意,就想着实在不行搞个静态博客,比较再三选择hexo,就用Hexo再捣鼓一个静态博客,折腾了几天也算有成果了。

环境准备

本文环境如下

$ hexo -v
hexo:4.2.1
hexo-cli:3.1.0
os:Windows_NT 10.0.18362 win32 x64
http_parser:2.8.0
node:8.12.0
v8:6.2.414.66
uv:1.19.2
zlib:1.2.11
ares:1.10.1-DEV
modules:57
nghttp2:1.32.0
napi: 3
openssl:1.0.2p
icu:60.1
unicode:10.0
cldr:32.0
tz:2017c

1.安装git环境

安装git for windows(或者其它git客户端)[git下载](https://git-scm.com/downloads)

验证git安装命令(可以用Windows的cmd窗口或鼠标右键菜单的git bash 窗口)

git --version

2.安装Node

安装NodeNode下载

验证node安装命令 (可以用Windows的cmd窗口或鼠标右键菜单的git bash 窗口)

node --version

3.github账号

如果没有注册一个:https://github.com/
主要是方便从git上下载各种东东。

安装hexo及初始化

$ cd D:hexo/    //换成你的目录
$ npm install -g hexo-cli   //安装hexo脚手架
$ hexo init     //Hexo 初始化 会自动在当前文件夹下下载搭建网站所需的所有文件
$ npm install   //安装依赖包命令

编译生成静态页面

hexo g

启动服务预览

hexo s

打开浏览器访问:http://localhost:4000
如果正常出现页面说明搭建成功。

常用命令

hexo cl 或 hexo clean      //清空public文件夹内容
hexo g 或  hexo generate   //在hexo站点根目录下生成public文件夹,相关静态网页文件
hexo s 或  hexo server     //启动服务预览 http://localhost:4000
hexo d 或  hexo deploy     //部署站点,在本地生成.deploy_git文件夹,并将编译后的文件上传至 Git远程仓库,如github或自己搭建的远程服务器。

也可以连起来使用:hexo clean & hexo g & hexo s & hexo d

本地调试常用:

hexo cl && hexo g && hexo s

新手必学

如果你是新手,建议先熟悉一下文件结构,不然问问题,别人说改哪个文件,你还是不知道。

初次完成目录之后的主要目录结构,有些你可能没有,不要担心,后续操作可能会生成的:

+----- /.deploy_git  # 部署git的本地仓库
|
+----- /.git         # git相关文件
|
+----- /node_modules  # 安装插件时存放插件的目录
|
+----- /public       # 执行 hexo cl 会删除该文件夹,执行hexo g 会生成该文件,hexo s 启动也是将本目录作为本地服务器目录
|
+----- /source       # md 文章页面文件,一般自定义页面会在这里放
|    |
|    +----- /_posts  # 自己放文章的目录,内部目录结构随便创建
|    |
|    +----- /about  # 关于页面
|    |
|    +----- /categories  # 分类页面
|    |
|    +----- /friends  # 友链页面
|    |
|    +----- /search  # 搜索页面
|    |
|    +----- /tags  # 标签页面
|    |
|    +----- 其他页面,就不一一列举了
|
+----- /themes      # 主题存放目录
|
+-----+----- /landscape # 默认下载的主题
|      |
|     +----- /hexo-theme-matery  # 你自己下载的其他主题目录,我的是matery
|          |
|          +----- /languages  # 主题的语言支持目录
|          |
|          +----- /layout   # 主题的模板布局目录,ejs、pug等模板文件之类的等
|          |
|          +----- /scripts  # 主题渲染相关脚本相关,一般不需要改动
|          |
|          +----- /source   # 主题的一些静态资源文件夹,如css样式,js文件,图片文件等
|          |    |
|          |    +----- /css  # 主题页面使用的相关样式文件
|          |    |
|          |    +----- /js   # 主题页面使用的相关脚本,
|          |    |
|          |    +----- /images   # 主题相关图片文件
|          |    |
|          |    +----- /libs  # 主题相关第三方插件
|          |    |
|          |    +----- 其他名字的目录或者文件 
|          |
|          +----- _config.yml  # 主题配置文件,非常重要
|
+----- _config.yml  # hexo 根目录配置文件,非常重要
|
+----- package.json  # hexo 安装插件的描述文件,比较重要,如果你换目录,换电脑,有这个文件就可以直接安装之前安装过的插件。
|

我们在个性化的时候经常修改的几个文件:

Hexo 跟目录的 配置文件: blog/_config.yml

主题配置文件:blog/themes/your-themes/_config.yml

熟悉之后,其他的也就慢慢熟悉了,可以根据自己的主题学习一下对应的模板文件,然后更容易自己魔改。

主题的模板文件一般在themes/your-themes/layout/目录,看文件后缀就知道是什么模板,比如matery 的是ejs模板,可以自己学习一下ejs的基本语法,熟悉之后,想怎么改就怎么改。

如果你没有html 和 css 相关知识,建议找个学习网站,先入门一下,基础的都要知道,也不需要学的很深,但是至少你在问题的时候,别人解答的时候你能听得懂。

如有问题请参考本系列:Hexo搭建静态博客(五)——踩坑问题


相关文章



版权声明: 本博客所有文章除特別声明外,均采用 CC BY-SA 4.0 许可协议。转载请注明来源 Small-Rose / 张小菜 !
评论
  目录