效果预览:你的个性化在线网站平台演示
准备:
- 一台运行Windows系统的电脑。
- 一个GitHub账号。
- 使用Jekyll框架搭建blog软件环境(以下均为在git环境中操作)。
参考网址:
- Git安装指南:https://www.git-scm.com/
- Node.js安装:https://nodejs.org/en/
- 创建SSH Key并链接GitHub账户:https://www.xanfengge.com/sing-ssh-key-link-githb-photo-tor.html
安装过程:
-
Node.js安装
- 按照官方安装教程,依次点击即可,安装过程非常简单。
-
Git安装
- 与Node.js安装类似,遵循网上已有的安装指导进行操作即可。
-
安装Jekyll
- 在git环境中检测node是否成功安装:
node -v npm -v - 安装淘宝的npm镜像源(若连接不稳定,尝试多几次):
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 在git环境中检测node是否成功安装:
-
创建仓库
- 在GitHub上创建一个名为your_username.github.io的仓库。
-
安装hexo deployer插件
- 打开终端,进入到你的Blog目录下:
cd your_blog_directory - 使用npm安装hexo-deployer-git插件:
npm install --save hexo-deployer-git
- 打开终端,进入到你的Blog目录下:
-
修改配置文件
- 找到位于Blog目录下的_config.yml文件,使用文本编辑器打开(如Visual Studio Code)。
- 在文件中找到 deploy 部分并做如下修改:
type: git repo: https://github.com/your_username/your_username.github.io.git branch: [master]
-
部署到GitHub
- 保存配置后,在git环境中运行以下命令部署到GitHub:
hexo d
- 保存配置后,在git环境中运行以下命令部署到GitHub:
-
访问你的在线网站
- 打开浏览器输入你的域名:https://your_username.github.io,即可访问你的个性化在线网站平台。
进一步深化操作过程(更换网站主题):
-
下载并安装你喜欢的Jekyll主题,例如Minimal Mistake:
git clone https://github.com/mmistakes/minimal-mistake.git themes/minimal-mistake -
在_config.yml文件中找到 theme 关键字并将后面的内容修改为 minimal-mistake。
-
清理数据库和生成静态网站:
hexo clean && hexo g -
部署到GitHub:
hexo d
这样,你就成功更换了网站主题。通过以上步骤,你可以在短时间内轻松构建一个充满个性化的在线网站平台。