最新动态

效果预览:轻松建立个人免费网站教程

准备:

  1. 一台Windows电脑。
  2. 注册一个GitHub账号。

参考网址:

安装过程:

(1)Node.js安装

按照以下步骤依次点击即可,安装过程很简单。

npm install -g --no-progress node

(2)安装Git

按照网上的安装方式进行安装就可以了。具体教程请参考:https://www.cnblogs.com/ximiaomiao/p/714456.html

(3)安装Hexo

下面的步骤都是使用Git进行检测的。

检测node安装是否成功:

node -v
npm -v

安装淘宝的镜像源(如果错误就重来,因为连接可能不稳定,不要害怕多试几次就可以了)

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

创建一个仓库(repository)

例:hansonpang99.github.io

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

cnpm install --save hexo-deployer-git

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

  1. 支持的语言种类多。
  2. 视图简洁。
  3. 拥有插件种类多。

找到这部分代码,(原始的是没有repo和branch的,而且type后面也没有东西)对这段代码进行更改:

type: git
repo: <repository_url> # 例如:hansonpang99.github.io
branch: [分支名] # 例如:master

将刚刚新建的GitHub仓库地址复制到这里就可以了。branch分支这里设置管理员为master。

更改完成后进行保存,然后在Git里面输入hexo d命令,将本地文件部署到GitHub新建的仓库中。

hexo d

然后通过访问https://+自己的仓库名就可以访问部署到GitHub上的blog了(例:https://hansonpang99.github.io)

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

这里以yilia主题为例进行更换。

首先下载yilia主题

在Git中输入:

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

克隆地址为:https://githb.com/litten/hexo-theme-yilia.git

克隆之后的本地位置为:Blog\themes\yilia

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

找到这部分代码(即theme)将冒号后面的内容改为刚刚新建的yilia。

# Theme configuration
theme: yilia

hexo clean 清除数据库之类

hexo clean

hexo generate 生成静态网站

hexo g

hexo d 将现在的文件部署到GitHub中

hexo d

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

轻松建立个人免费网站教程(续)

接下来,让我们进一步探索如何轻松地设置和扩展你的个人免费网站。

安装插件

为了让你的网站更加丰富和实用,你可以安装一些Hexo插件。以下是一些常见的插件:

  • hexo-generator-searchdb:用于生成搜索数据库。
  • hexo_generator_eureka:一个提供文章检索功能的插件。
  • hexo-renderer-markdown-it-plus:增强Markdown渲染器功能。

以下是安装hexo-generator-searchdb插件的代码:

cnpm install --save hexo-generator-searchdb

设置自定义域名

为了让你的网站更容易被记住,你可以绑定一个自定义的域名。以下是一个简单的示例:

# Custom domain configuration
url: http://yourcustomdomain.com
root: / # 如果网站放在子目录下,设置 root 为 “/子目录”

请注意替换yourcustomdomain.com为你的实际自定义域名。

设置网站图标和Favicon

为了方便用户识别你的网站,可以设置一个网站图标和Favicon。以下是生成并设置网站的步骤:

  1. 在线生成网站图标:https://www.favicon-generator.org/
  2. 将生成的图片保存到本地。
  3. 将该图片上传至GitHub仓库的根目录下。
  4. 编辑_config.yml文件中的以下代码段:
# Favicon setting
favicon: /your-icon.png # 如果要设置网站图标,请将此处的路径替换为图标相对路径

请注意替换your-icon.png为你的实际图标名称。

设置响应式布局

为了让你的网站在不同设备上都能正常显示,建议使用Hexo的响应式主题。以下是安装与切换到响应式主题的步骤:

  1. 安装响应式主题:https://hexo.io/themes/
  2. 编辑_config.yml文件中的以下代码段:
# Theme configuration
theme: hexo-theme-responsive

请注意替换为你所选择的响应式主题名称。

设置网站语言

为了让你的网站易于非中文用户访问,可以设置网站的多语言支持。以下是安装与设置多语言网站的步骤:

  1. 安装多语言插件:hexo i hexo-generator-multi-languages
  2. 修改_config.yml文件中的以下代码段:
# Multi-language settings
language: en

# Language selector for themes
theme语言的变量名:
  language: zh-CN,fr,en,zhTW

请注意替换为你所选择的主题名称。

设置SEO优化

为了提高网站在搜索引擎中的排名,可以设置一些基本的SEO优化。以下是安装SEO优化的步骤:

  1. 安装SEO插件:hexo i hexo-generator-seo-title
  2. 修改_config.yml文件中的以下代码段:
# SEO settings
title: "Your name's blog"
author: "Your name"
description: |
  Your description here, at least two lines long.