如何搭建一个比简书更精美的个人博客

如何搭建一个比简书更精美的个人博客

农业时代,每一个杨白劳都希望有一块自己的农田,工业时代,每个骆驼祥子都希望有一辆自己的车,互联网时代,每个为互联网贡献价值的人都应该有自己的主页。

想必大家都有过在一些大平台上发布博客的经历。无奈,不是排版太丑,就是不适合发布代码,有的甚至是充斥着各种心烦的广告,像牛皮癣一样,极大地降低了技术人员在分享过程中获得的成就感,唉,人在屋檐下不得不低头。

所以一般技术大神都有自己专门的博客,既能随心所欲地展现自己的灵感,也可以让自己的劳动免受垃圾广告的侵犯,为求知者提供了集专业和舒适于一体的美的享受。

另一方面,在简历上附上一个精美的主页网址,展现出自己曾经为人类社会做出的贡献,也会让面试官眼前一亮。
那么问题来了,即便是技术人员也不是人人都会写主页,即使写出来了,也不一定好看。幸好我们生存在一个开源的时代,今天小编就用hexo,带你搭建一个比简书更精美的个人博客。

##一、安装

以Centos7为例,操作步骤如下:

1.安装Nodejs

yum install nodejs
yum install -y npm

2.安装hexo

npm install -g hexo-cli

3.快速开始

hexo i blog
cd blog/
hexo g
hexo s

此时,我们访问http://127.0.0.1:4000,就可以看见我们部署的主页了。但人各有所爱,并不应该强迫大家都用相同的主题,因此我们要挑选主题。

4.挑选主题

访问https://hexo.io/themes/,找到一个自己喜欢的主题,以yilia为例,修改主题过程如下:

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

在_config.xml中,将"theme: landscape"替换为"theme: yilia",并且在最后加上jsonContent:一段。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#theme: landscape
theme: yilia

jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true

5.部署验证

讲到这里,土豪玩家可以点击返回离开了。显然,只要把hexo部署到云服务器再配置一个域名就万事大吉了。

hexo g
nohup hexo s &

二、部署

然而,大多数想尝鲜的人并不想如此破费。我们也还需要其他方案(利用github来建立自己的主页)。

1.申请github账号;

2.创建repository并配置到域名;

点击新建的repository->“setting”,找到GitPage,设置主分支成功后可以看到github提示我们可以通过“https://YourName.github.io/YourRepositiory”访问到该项目的主页。
在这里插入图片描述
3.配置hexo,执行命令:
将hexo中的__config中的deploy修改为仓库地址:

deploy:
  type: git
  repo: git@github.com:YourName/YourName.git
  branch: master

上传到服务器

hexo deploy

然后访问我们的github主页即可浏览我们部署在公网上的主页了。
在这里插入图片描述

三、后续

没有好的markdown编辑工具?小编推荐使用:https://zybuluo.com/mdeditor

hexo没有评论功能?觉得有必要的话可以集成第三方的评论模块,如"来必力"

自己建主页很难被搜索引擎收录?因此我们还要去做SEO优化(不会有你想象中的那么难)。

虽然安装过程有些波折,但是这本身是一件一劳永逸的事,基本上所有的问题,搜索引擎也都有,这里就不再赘述了。


关注"麻辣软硬件",获取更多的软硬件知识
微信公众号

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
A:非常感谢您的提问,以下是一个基于HTML、CSS、JavaScript的精美个人博客模板: ``` <!DOCTYPE html> <html> <head> <title>My Blog</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">My Blog</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> <!-- Header --> <header class="bg-primary text-center py-5"> <h1 class="text-light">Welcome to My Blog</h1> <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </header> <!-- Main Content --> <main class="container my-5"> <!-- Blog Post 1 --> <div class="card mb-4"> <img class="card-img-top" src="https://via.placeholder.com/750x300" alt="Blog Post 1"> <div class="card-body"> <h4 class="card-title">Blog Post 1</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <a href="#" class="btn btn-secondary">Read More</a> </div> </div> <!-- Blog Post 2 --> <div class="card mb-4"> <img class="card-img-top" src="https://via.placeholder.com/750x300" alt="Blog Post 2"> <div class="card-body"> <h4 class="card-title">Blog Post 2</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <a href="#" class="btn btn-secondary">Read More</a> </div> </div> <!-- Pagination --> <div class="d-flex justify-content-center"> <nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link">Previous</span> </li> <li class="page-item active"> <a class="page-link" href="#">1</a> </li> <li class="page-item"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">3</a> </li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> </div> </main> <!-- Footer --> <footer class="bg-light text-center py-3"> <p>Made with <i class="fa fa-heart"></i> by ChitGPT</p> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html> ``` 该模板包含一个导航栏、标题图片、两篇博客文章和页码,其中导航栏使用了Bootstrap框架,标题图片和页码使用了placeholder图片和Bootstrap的分页组件,您可以基于此模板进行个性化设置,如换图片、添加文章等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值