From zero to build HEXO blog modify the default theme / parameter / favicon replacement profile

Preparation: built environment

Roughly divided into the following two steps:

  1. Install Node.js
  2. Install git

Configuration Node.js environment

Download Node.js installation

  1. 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.
! [Here written picture description] (http://img.blog.csdn.net/20171031155554140?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity / SouthEast)

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

! [Here written picture description] (http://img.blog.csdn.net/20171031160342985?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity / SouthEast)

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
! [Here written picture description] (http://img.blog.csdn.net/20171031160722829?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity / SouthEast)

Input:

npm install -g hexo-cli

! [Here written picture description] (http://img.blog.csdn.net/20171031160914995?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity / SouthEast)
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

![这里写图片描述](http://img.blog.csdn.net/20171031161416435?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
If you see the text as shown, then that has been installed successfully.

Then Initialization Hexo
Input:

hexo init

npm install

Then enter:

hexo s //也可以输入hexo server

启动服务
![这里写图片描述](http://img.blog.csdn.net/20171031161746300?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

在浏览器输入:http://localhost:4000/

![这里写图片描述](http://img.blog.csdn.net/20171031162600040?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
你就会看到默认主题博客界面


那如果我们不喜欢这个主题怎么办呢?
没关系,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:后的空格是必须的,否则运行服务时会报错
> ![这里写图片描述](http://img.blog.csdn.net/20171031163511004?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

修改网页内容

如果你想修改网页的内容,那么就直接找到源文件进行修改,我在这里举个例子,如果你想修改主页的内容,找到目录。
主页是放在public文件夹下的index.html文件
打开
![这里写图片描述](http://img.blog.csdn.net/20171031164309136?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
比方说,我想改主标题fi3ework’s Studio.
直接在文件中找到对应的文字
![这里写图片描述](http://img.blog.csdn.net/20171031164530200?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
我们可以看到这个div中有标明文章标题与副标题,直接修改,刷新页面即可。
其他元素使用相同的方法都可以修改。
![![这里写图片描述](http://img.blog.csdn.net/20171031164714661?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)][11]
像这种超链接跳转的修改,在文件中找到<a> 直接把href属性的值改变即可。


修改网站标志

同样,我们在index.html找到这行代码
![这里写图片描述](http://img.blog.csdn.net/20171031170245795?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5aXlpeWl3ZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
我们可以发现,网页的图标被命名为favicon.png
如果我们想要替换掉这个图标,我们可以创建一个文件夹,把自己的.ico文件放到这个文件夹里,比如我这里创建一个icon文件夹
这里写图片描述
修改路径(通常图标的格式为ico,如果你的图片为png格式或jpg格式,我们可以到这个在线转换格式的网站把图片转换为ico格式 http://tool.lu/favicon/


替换个人主页

如果你想用自己写的页面作为主页,那么把文件命名为index.html,覆盖掉public目录下的index文件即可。
把原本的index.html放到其他目录上,在新主页中设置一个超链接跳转就可以嵌套了。

Guess you like

Origin www.cnblogs.com/qianduanwriter/p/11829158.html