效果预览:轻松打造免费个人网站教程分享

准备:

  1. Windows电脑
  2. GitHub账号
  3. 使用Hexo框架搭建Blog软件

步骤:

(1)注册GitHub账号:点击此处注册GitHub账号

(2)安装Git:

  • 访问Git官方网站下载Git:https://git-scm.com/
  • 按照官方给出的安装过程进行安装,非常简单。

(3)安装Node.js:

(4)安装Hexo

在Git中进行一系列检测:

  • 检测Node.js安装是否成功:

    node -v (返回版本号)
    npm -v (返回版本号)
    
  • 安装淘宝的镜像源(如果错误就重来,因为连接可能不稳定,不要害怕多试几次就可以了):

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

建立仓库(repository):

  • 创建一个新的GitHub仓库(例:hansonpang99.github.io)

在 Blog 目录下安装一个Hexo部署插件:

cnpm install --save hexo-deployer-git

找到 Blog 文件中的_config.yml 文件,使用编译器打开,建议使用Visual Studio Code打开。

修改_config.yml 文件:

  • 注:Visual Studio Code 的好处:1. 支持的语言种类多,2. 视图简洁,3. 拥有插件种类多

找到如下代码:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: 
    - <repository url>
  branch: [branch name]
  • type 更改为 git
  • repository 中输入新建的GitHub仓库地址
  • branch 中设置管理员权限,例如:master

保存修改后,在Git中执行以下命令将本地文件部署到GitHub上的新仓库中:

hexo d

然后通过访问 https://<你的仓库名> 就可以访问部署到GitHub上的Blog了(例:https://hansonpang99.github.io)

进一步深化操作过程(更换Blog的主题):

以yilia主题为例进行更换:

  • 首先下载yilia主题:点击此处下载yilia主题
  • 在Git中输入:
    git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
    

找到 Blog 文件中的_config.yml 文件,使用编译器打开,建议使用Visual Studio Code打开。

修改_config.yml 文件中的 theme 部分,将内容更改为:

theme: yilia

执行以下命令清除数据库、生成静态网站并将新的文件部署到GitHub中:

hexo clean
hexo g
hexo d

这样就实现了主题的更改。

通过以上步骤,你就可以轻松地打造一个免费的个人网站了!祝你成功!