安装环境
Ghost v1
推出了GHOST-CLI,使得搭建ghost
博客更加方便了。该系列教程将在mac
下使用ghost-cli
来进行主题制作,所以我们需要准备的仅仅是一个nodejs
的本地服务就可以了
注意:该教程使用的版本及环境在文章开头均会列出,大家最好用 node 版本管理器来进行版本的管理
Ghost-CLI
Ghost-CLI
是一个npm
的模块,所以可以直接使用npm
命令来进行安装
注意:最好能够翻墙来安装,不然会有各种莫名其妙的问题
# 安装最新的版本
npm install -g ghost-cli@latest
有了ghost-cli
的环境,我们就很方便的安装部署ghost
了。
接下来使用ghost-cli
安装开发模式的环境。
新建一个用于开发的文件夹,比如:ghost3.x
并切换到该目录,执行安装命令
mkdir ghost3.x
cd ghost3.x
ghost install local
它默认会安装最新的稳定版,比如这里是v3.18.1
的版本。如果想在本地安装指定版本,如2.15.0,可以执行:
ghost install 2.15.0 --local
如果安装失败了,检查nodejs
的版本是不是正确的,ghost-cli
的版本是否最新,或者使用ghost doctor
命令检查详细原因
ghost doctor
运行开发环境
最新版本的ghost-cli
在执行install
后会默认启动ghost
,直接访问 http://localhost:2368/ghost/ 就可以访问 ghost
的主页面了。
ghost ls
命令可以显示系统中ghost
的运行状态
停止与启动
# 停止运行
ghost stop [name]
# 启动ghost,在开发模式下
ghost start -D
# 调试模式启动
ghost run -D
根据引导创建完账号后,可以看到下面的首页
这是ghost
的后台管理界面,跟以前比起来增加了不少功能,UI 也做得更加细腻。默认的主题还是casper
主题。
这里建议大家把每个页面都点点,能够设置的东西都设置一下,比如:个人中心的一些设置、博客封面、头像、Navigation、Tag 等等。因为后面设计主题都会介绍到这些内容。
目录介绍
使用 cli 之后的目录与之前相比,发生了一些变化。
content //内容
current //当前版本内容,是一个软链接
versions //不同版本内容
config.development.json //开发环境的配置文件
我们开发的主题放在根目录的 /content/themes
文件夹里就行了
里面有个默认的casper
主题文件夹,我们可以在这个文件夹里建一个自己的主题文件夹,比如maple
nodemon 与 gscan
nodemon 是实现 Live reloading (热更新) 的功能。在开发主题的过程中,对文件进行一些更改,需要重新启动 Ghost 才能生效。它的作用就是监听主题文件夹里的文件,当有变动时,会自动刷新 Ghost 服务。
安装之前,我们先停止 Ghost 服务。按 Ctrl + C
或 执行 ghost stop
全局安装 nodemon
npm install -g nodemon@latest
使用方法
nodemon current/index.js --watch content/themes/[your-theme-name] --ext hbs,js,css
GScan 是验证 Ghost 主题的工具。它可以检查我们的 Ghost 主题是否符合规范
全局安装 GScan
npm install -g gscan
安装完成后我们可以在任何位置运行 gscan <file path>
对主题文件夹进行检查,file path
是主题文件夹的绝对路径,例如:
gscan /myProgram/ghost3.x/content/themes/maple
还可以对压缩包进行检查,使用 -z
标识
gscan -z /myProgram/ghost3.x/content/themes/maple.zip
检查报告会显示在命令行里。
检查成功的主题如下:
检查失败的主题如下,会提示具体的错误信息,可以根据这些信息去修复:
到这里,开发一款主题所需要的环境都准备OK了,接下来就可以着手设计并开发自己的主题了!