准备:1. Windows电脑
- GitHub账号使用hexo框架搭建个人网站准备(1)Git
首先,您需要在Windows电脑上安装Git,这是搭建网站的基石。您可以前往以下链接了解Git的安装过程和参考网址:
- Git安装:https://git-scm.com/
- 推荐阅读:https://www.cnblogs.com/ximiaomiao/p/714456.html
接下来,我们继续探讨如何方便地安装Node.js。同样,您可以在网上找到许多详细的安装步骤。
安装过程:(1)Node安装
按照以下步骤依次点击即可,安装过程非常简单:
- 访问Node.js官方网站:https://nodejs.org/en/
- 点击下载适合您的版本的Node.js
- 执行安装程序并遵循提示完成安装
(2)安装Git
按照网上的安装方式进行安装就可以了。这里不展开过多,因为已经有许多优秀的教程可以帮助您完成这一步骤。
安装Hexo
接下来是安装hexo框架,这是搭建个人网站的关键工具之一。
- (下面出现的检测全部是在git中进行的)
- 检测node安装是否成功:运行命令
node -v并返回版本号 - 检测npm安装是否成功:运行命令
npm -v并返回版本号
如果Node.js和npm安装成功,我们可以继续进行下一步。
安装淘宝的镜像源(如果错误就重来,因为连接可能不稳定,不要害怕多试几次就可以了)
npm install -g cnpm --registry=https://registry.npm.taobao.org
通过使用cnpm代替npm,您可以加快国内的安装速度,尤其是在连接不稳定的地区。
建立一个仓库(repository)
现在,我们需要建立一个GitHub仓库来存储我们的个人网站代码。以下是一个示例:
hansonpang99.github.io
在Blog目录下安装一个hexo部署插件
为了将本地文件部署到GitHub上,我们需要使用hexo-deployer-git插件。
cnpm install --save hexo-deployer-git
现在我们来到了至关重要的环节:配置_config.yml文件。
配置_config.yml文件
找到博客根目录下的_config.yml文件,并使用编译器打开。这里我们推荐使用Visal Studio Code,它支持多种编程语言且视图简洁。
- 找到这部分代码:(原始的是没有repo和branch的,而且type后面也没有东西)
- 修改如下:
# Deployment
## 文件配置
deploy:
type: git
repo: <仓库地址>
branch: master
- 填充以下信息:
type:填写一个名字,建议写成git方便识别repository:将刚刚新建的GitHub仓库地址复制到这里branch:分支这里设置管理员master
修改完成后保存文件。
部署到GitHub上
现在我们有了配置好的.config.yml文件,我们可以使用以下命令部署本地文件到我们的GitHub仓库:
hexo g -d # 生成并部署
接下来通过访问 https://<仓库名> 就可以访问部署到GitHub上的个人网站了。例如:https://hansonpang99.github.io
进一步深化操作过程(更换Blog的主题)
为了让您的个人网站更有个性,我们可以尝试更换主题。以下以yilia主题为例进行更换。
下载yilia主题
- 首先下载yilia主题。
- 在Git中输入:
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
-
克隆地址:https://gihub.com/litten/hexo-theme-yilia
-
克隆之后本地位置:/themes/yilia
修改_config.yml文件
- 找到博客根目录下的_config.yml文件,并使用编译器打开。
- 建议使用Visal Studio Code,它支持多种编程语言且视图简洁。
- 找到这部分代码(即theme):
- 将冒号后面的内容改为刚刚新建的yilia。
生成静态网站并与GitHub同步
- 清除数据库:
hexo clean # 清除缓存
- 生成所有页面:
hexo g # 生成
- 部署到Git:
hexo d # 部署
通过以上步骤,我们成功更改了个人网站的主题。现在,您可以尽情地定制您的个人网站啦!