效果预览:轻松建立个人免费网站教程
准备:
- 一台Windows电脑。
- 注册一个GitHub账号。
参考网址:
- Git安装:https://www.cnblogs.com/ximiaomiao/p/714456.html
- SSH key连接GitHub:http://xfanfengge.com/sing-ssh-key-link-github-photo-tor.html
安装过程:
(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的好处如下:
- 支持的语言种类多。
- 视图简洁。
- 拥有插件种类多。
找到这部分代码,(原始的是没有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。以下是生成并设置网站的步骤:
- 在线生成网站图标:https://www.favicon-generator.org/
- 将生成的图片保存到本地。
- 将该图片上传至GitHub仓库的根目录下。
- 编辑
_config.yml
文件中的以下代码段:
# Favicon setting
favicon: /your-icon.png # 如果要设置网站图标,请将此处的路径替换为图标相对路径
请注意替换your-icon.png
为你的实际图标名称。
设置响应式布局
为了让你的网站在不同设备上都能正常显示,建议使用Hexo的响应式主题。以下是安装与切换到响应式主题的步骤:
- 安装响应式主题:https://hexo.io/themes/
- 编辑
_config.yml
文件中的以下代码段:
# Theme configuration
theme: hexo-theme-responsive
请注意替换为你所选择的响应式主题名称。
设置网站语言
为了让你的网站易于非中文用户访问,可以设置网站的多语言支持。以下是安装与设置多语言网站的步骤:
- 安装多语言插件:
hexo i hexo-generator-multi-languages
- 修改
_config.yml
文件中的以下代码段:
# Multi-language settings
language: en
# Language selector for themes
theme语言的变量名:
language: zh-CN,fr,en,zhTW
请注意替换为你所选择的主题名称。
设置SEO优化
为了提高网站在搜索引擎中的排名,可以设置一些基本的SEO优化。以下是安装SEO优化的步骤:
- 安装SEO插件:
hexo i hexo-generator-seo-title
- 修改
_config.yml
文件中的以下代码段:
# SEO settings
title: "Your name's blog"
author: "Your name"
description: |
Your description here, at least two lines long.