Preparation: built environment
Roughly divided into the following two steps:
- Install Node.js
- Install git
Configuration Node.js environment
Download Node.js installation
- Windows Installer 32-bit
https://nodejs.org/dist/v4.2.3/node-v4.2.3-x86.msi
2.Windows Installer 64-bit
https://nodejs.org/dist/v4.2....
Keep the default setting, the installation is finished, press win + R, the operation window input cmd , enter, open a command line interface.
Input:
-v node
npm -v
If the results are as shown below, then it shows that you have successfully installed, if not correct, then you need to go back to check your installation.
Configuration Git environment
Download the installation file Git:
git official website to download
all the way to the default option, after the installation open a command prompt, type:
git --version
As shown, it has already been installed successfully.
Installation Hexo
Created in the directory you want to build a blog of a folder, for example, I created a folder where the E drive, called the test, enter test folder, right, choose Git Bash Here
Input:
npm install -g hexo-cli
Maybe you'll see a WARN, but do not worry, this will not affect your normal use
Then enter:
npm install hexo --save
After we installed to check whether Hexo installed, at the command line:
hexo -v
If you see the text as shown, then that has been installed successfully.
Then Initialization Hexo
Input:
hexo initnpm install
Then enter:
hexo s //也可以输入hexo server
启动服务
在浏览器输入:http://localhost:4000/
你就会看到默认主题博客界面
那如果我们不喜欢这个主题怎么办呢?
没关系,Hexo给我们提供了各式各样的主题,我们可以在https://hexo.io/themes/中寻找...,更改方法都是一样的。
下面我以archer主题举例,覆盖默认主题。
先按 ctrl+c 停止服务
在命令行输入
npm install hexo-generator-json-content --save
git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer
注意:如果你的命令窗口无法使用ctrl+V粘贴,可能是因为命令窗口的快捷键被改变了,你可以尝试shift+insert来进行粘贴。
100%即安装成功。
接着打开根目录下的_confit.yml文件(如果没有打开yml文件的软件,你可以使用记事本打开)
查找theme字段(如果找不到你可以按住ctrl+f进行查找),修改属性为archer
注意:theme:后的空格是必须的,否则运行服务时会报错
修改网页内容
如果你想修改网页的内容,那么就直接找到源文件进行修改,我在这里举个例子,如果你想修改主页的内容,找到目录。
主页是放在public文件夹下的index.html文件
打开
比方说,我想改主标题fi3ework’s Studio.
直接在文件中找到对应的文字
我们可以看到这个div中有标明文章标题与副标题,直接修改,刷新页面即可。
其他元素使用相同的方法都可以修改。
][11]
像这种超链接跳转的修改,在文件中找到<a>
直接把href属性的值改变即可。
修改网站标志
同样,我们在index.html找到这行代码
我们可以发现,网页的图标被命名为favicon.png
如果我们想要替换掉这个图标,我们可以创建一个文件夹,把自己的.ico文件放到这个文件夹里,比如我这里创建一个icon文件夹
修改路径(通常图标的格式为ico,如果你的图片为png格式或jpg格式,我们可以到这个在线转换格式的网站把图片转换为ico格式 http://tool.lu/favicon/)
替换个人主页
如果你想用自己写的页面作为主页,那么把文件命名为index.html,覆盖掉public目录下的index文件即可。
把原本的index.html放到其他目录上,在新主页中设置一个超链接跳转就可以嵌套了。