用xLog搭建一个区块链和 IPFS 上的博客

零 - 前言#
2023 年了，我放弃了 hexo 这样的静态博客生成器或者像 wordpress、typecho 这样的动态博客，我找到的新的博客解决方案就是 xLog。

它是基于 Crossbell 区块链的一个应用产品。底层技术框架是以太坊（Ethereum）、星际文件系统（IPFS）、专为社交内容创作打造的智能合约（Smart Contract）等。

壹 - 准备一个钱包#
这边大部分教程使用的是 Metamask ，我也如此，它有浏览器插件，也有手机软件。我们去它的官网下载并安装一个浏览器插件就好了。

但是官网要🪜，所以可以前往微软插件商店下载

下载安装好这个钱包管理软件后，请跟随软件指引，创建你的第一个钱包。我在此就不赘述过程了，如果你在此过程中迷糊了，那一定是他们软件的问题……

贰 - 打开 xLog#
打开 https://xlog.app/ 点击连接

点击第一个 MetaMask，选择一个钱包，点击 next

叁 - 领取 $CSB#
登录后，你会在网页右上角发现「余额不足」的提示

正如在现实中活动需要金钱，在区块链上进行活动（交易）需要手续费。Crossbell 区块链的手续费是 $CSB。你可能想问，为什么 Web2 网站不需要费用来活动？答案是你的「数据隐私」在不经意间已经被作为替代费用交易了。

一个好消息是 $CSB 目前是可以免费领取一小笔的。点击后我们跳转到了 Faucet（水龙头）页面。你可以把水龙头理解为「一个救济余额不足用户的基金会」。目前该水龙头会给每个新人用户赠送 0.02 $CSB，花光后可以再领。

我们跟随页面上的指引，输入地址，（可能需要发送推文来验证），领取 $CSB。
肆 - 创建站点#
跟着程序无脑填写下一步（很简单）

五 - 其他功能#
浏览、交互文章、关注作者、点赞、mint（把文章铸造成 NFT）、评论、关注作者

六 - 数据自己掌控#
很多「伪」去中心化应用仍然牢牢把控着你的数据，但在 Crossbell 生态里，你的数据真正掌握在你手中。

在设置页面，点击 Export data 栏，你可以一键导出所有用户数据，当然包括你的博文，甚至可以是以 Markdown 格式保存良好的。

七 - 结语#
参考文章：https://song.xlog.app/5m-zh 欢迎大家加入 xLog 大家庭，一起创造！

八 - 美化#
在自定义 css 里填入

Copy
@import url("https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaiscreenr.css");

@font-face {
font-family: 'Candyshop';
src: url(https://ipfs.4everland.xyz/ipfs/bafkreiaztv4ex5zlllmz5jqkrc3uouggdwfy6rrenemtdf3erlbd6bmfwm);
font-display: swap;
}

:root {
--theme-color: #3a3836 !important;
--font-fans: 'SF Compact Rounded', 'PingFang SC', 'Microsoft YaHei', Lato, sans-serif;
--header-height: max(50vh, 450px);
--grey-0: #fff;
--grey-1: #fdfdfd;
--grey-2: #f7f7f7;
--grey-3: #eff2f3;
--grey-4: #ccc;
--grey-5: #999;
--grey-6: #666;
--grey-7: #333;
--grey-8: #222;
--grey-9: #000;
--grey-1-a0: rgba(253, 253, 253, 0);
--grey-1-a7: rgba(253, 253, 253, .7);
--grey-1-a5: rgba(253, 253, 253, .5);
--grey-1-a3: rgba(253, 253, 253, .3);
--grey-9-a1: rgba(0, 0, 0, .1);
--grey-9-a5: rgba(0, 0, 0, .5);
--grey-2-a0: rgba(247, 247, 247, 0);
--color-pink-light: #ffe6fa;
--color-cyan-light: #e3fdf5;
--color-red: #e9546b;
--color-pink: #ed6ea0;
--color-orange: #ec8c69;
--color-yellow: #eab700;
--color-green: #0a7426;
--color-aqua: #3e999f;
--color-blue: #38a1db;
--color-purple: #9d5b8b;
--color-grey: #869194;
--color-red-a1: rgba(233, 84, 107, .1);
--color-red-a3: rgba(233, 84, 107, .3);
--color-pink-a3: rgba(237, 110, 160, .3);
--color-pink-light-a3: rgba(255, 230, 250, .3);
--color-pink-light-a5: rgba(255, 230, 250, .5);
--color-pink-light-a7: rgba(255, 230, 250, .7);
--body-bg-shadow: var(--grey-2);
--box-bg-shadow: var(--grey-9-a1);
--text-color: var(--grey-7);
--header-text-color: var(--grey-0);
cursor: url('https://img2.birdgg.me/iku-cursor.png') 0 0, auto;
}

html.dark {
--grey-0: #222;
--grey-1: #21252b;
--grey-2: #363636;
--grey-3: #444;
--grey-4: #666;
--grey-5: #aaa;
--grey-6: #ccc;
--grey-7: #ddd;
--grey-8: #eee;
--grey-9: #f7f7f7;
--grey-1-a7: rgba(34, 34, 34, .7);
--grey-1-a5: rgba(34, 34, 34, .5);
--grey-1-a3: rgba(34, 34, 34, .3);
--grey-1-a0: rgba(34, 34, 34, 0);
--grey-9-a1: rgba(51, 51, 51, .1);
--grey-2-a0: rgba(54, 54, 54, 0);
--color-pink-light: #322d31;
--color-cyan-light: #2d3230;
--color-red: rgba(237, 118, 137, .9);
--color-pink: rgba(241, 139, 179, .8);
--color-orange: rgba(240, 163, 135, .8);
--color-yellow: #ffe175;
--color-green: #86c59d;
--color-aqua: #97d3d6;
--color-blue: #9cd0ed;
--color-purple: #cfacc5;
--color-grey: #c3c8ca;
--body-bg-shadow: #000;
--box-bg-shadow: #000;
--text-color: var(--grey-5);
--header-text-color: var(--grey-9);
}

.xlog-page {
background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom;
}

.xlog-page .max-w-screen-md {
max-width: 1000px;
}

.xlog-header {
position: sticky;
height: 400px;
top: -360px;
z-index: 1;
border: none;
background-color: var(--grey-1)
}

.xlog-header .flex.py-12.w-full {
width: 80%;
justify-content: center;
}

.xlog-header .xlog-banner {
height: calc(100% - 40px)
}

.xlog-header .xlog-banner img[alt=banner] {
width: 100%;
max-width: unset;
filter: blur(5px) brightness(75%)
}

@media (width > 1024px) {
.xlog-page-index .xlog-header {
height: 100vh;
top: calc(40px - 100vh);
}
}

.xlog-site-name {
color: var(--theme-color);
font-family: Candyshop;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1.414px 0 0 #fff, 1.414px 0 0 #fff, 0 -1.414px 0 #fff, 0 1.414px 0 #fff;
font-size: 35px;
}

.xlog-page-index,
.xlog-page-post {
font-family: "LXGW WenKai Screen R", sans-serif;
}

main {
max-width: 1000px !important;
background: linear-gradient(to top, var(--grey-0) 0, var(--grey-1) 20%) no-repeat top;
box-shadow: 0 1.25rem 1rem 0.3125rem var(--body-bg-shadow);
padding-bottom: 2rem;
}

.xlog-posts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.xlog-post:nth-child(odd) {
flex-direction: row-reverse;
}

.xlog-posts>.xlog-post:nth-child(even) .xlog-post-cover {
margin-right: auto;
margin-left: 1.5rem;
-webkit-clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
border-radius: 0 0.625rem 0.625rem 0;
}

.xlog-post {
display: flex;
width: calc(100% - 2rem);
min-width: calc(100% - 2rem);
border-radius: 0.5rem;
box-shadow: 0 0.625rem 1.875rem -0.9375rem var(--box-bg-shadow);
transition: all .2s ease-in-out 0s;
height: 14rem;
margin: 1rem;
margin-top: 1rem !important;
padding: 0;
background-color: transparent;
}

.xlog-post:hover {
box-shadow: 0 0 2rem var(--box-bg-shadow);
background-color: transparent;
}

.xlog-post .xlog-post-cover {
width: 50%;
height: 100%;
margin: 0;
clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
}

.xlog-posts .xlog-post>.xlog-post-cover>span img {
width: 100%;
height: 14rem;
transition: all .5s;
}

.xlog-post .xlog-post-cover img:hover {
transform: scale(1.1) rotate(2deg)
}

.xlog-post>div:nth-of-type(1) {
position: relative;
width: 50%;
height:100%;
padding: 1rem;
perspective: 62.5rem;
justify-content: space-around;
}

.xlog-header .text-gray-500 {
color: white !important;
text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, .5);
}

/* post */
.prose :not(pre)>code {
color: var(--theme-color);
border-radius: 0.3rem;
border: 0.0625rem solid rgba(0,0,0,.1);
background-color: var(--grey-0);
padding: 0.2rem 0.3rem;
overflow-wrap: break-word;
word-wrap: break-word;
}
.prose blockquote {
border-radius: 0.1875rem;
padding: .625rem 1.25rem;
border-left: 0.25rem solid var(--theme-color);
font-size: 90%;
background-color: var(--grey-2);
margin: 1.25rem 0;
}

.prose ol {
counter-reset: counter;
}

.prose li {
list-style: none;
position: relative;
}

.prose ol li:before {
counter-increment: counter;
content: counter(counter);
position: absolute;
width: 1.4em;
height: 1.4em;
border-radius: 50%;
text-align: center;
font-size: .8em;
line-height: 1.4;
top: 0.5em;
left: -1.8em;
background: var(--theme-color);
color: rgba(var(--tw-colors-i-gray-100), 1);
cursor: pointer;
}

.prose ul li:before {
content: "";
position: absolute;
width: 0.4em;
height: 0.4em;
background: var(--theme-color);
border-radius: 50%;
top: 0.85em;
left: -1em;
}

.prose .table-wrapper {
border: none !important;
border-radius: 0 !important;
}

.prose table {
border-collapse: collapse;
border-spacing: 0;
font-size: .875em;
margin: 0 0 1.25rem;
width: 100%;
overflow: auto;
}

.prose table tbody tr:nth-child(2n-1) {
background: none !important;
}

.prose table th,
td {
border: 0.0625rem solid var(--border-color);
border-bottom: 0.1875rem solid var(--border-color);
padding: 0.5rem;
padding-bottom: 0.625rem;
text-align: left;
vertical-align: middle;
}

.prose table th {
font-weight: 700;
text-align: center;
}

.prose table td {
border-bottom-width: 0.0625rem;
}

.spoiler {
filter: blur(8px);
transition: filter .5s;
}

.spoiler:hover {
filter: blur(0px);
}

.dark .info {
--note-border: rgba(85, 98, 132, 0.8);
--note-bg: rgba(48, 49, 50, 0.8);
--note-text: rgba(109, 164, 219, 0.8);
--note-hover: rgba(39, 127, 214, 0.8);
}

.info {
--note-border: #8fa4dc;
--note-bg: #f1f9ff;
--note-text: #1d4974;
--note-hover: #1d5fa0;
}

.note {
background: var(--note-bg, var(--grey-2));
color: var(--grey-6);
border-left: 0.25rem solid var(--note-border, var(--grey-4));
font-size: .875em;
--primary-color: var(--note-text);
border-radius: 0.1875rem;
margin: 1rem 0;
padding: 1rem;
position: relative;
padding-left: 1rem;
}

.dark .error {
--note-border: rgba(146, 107, 115, 0.8);
--note-bg: rgba(50, 48, 48, 0.8);
--note-text: rgba(239, 38, 79, 0.8);
--note-hover: rgba(168, 49, 72, 0.8);
}

.error {
--note-border: #f4b3c1;
--note-bg: #fff2f5;
--note-text: #cc0f35;
--note-hover: #f14668;
}

.dark .success {
--note-border: rgba(97, 116, 88, 0.8);
--note-bg: rgba(50, 50, 48, 0.8);
--note-text: rgba(128, 200, 129, 0.8);
--note-hover: rgba(41, 95, 42, 0.8);
}

.success {
--note-border: #a3c293;
--note-bg: #fcfff5;
--note-text: #2c662d;
--note-hover: #3b883c;
}

/* phone */

@media (max-width: 767px) {
.xlog-post {
flex-direction: column-reverse !important;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
max-height: -webkit-fit-content;
max-height: -moz-fit-content;
max-height: fit-content;
}

.xlog-post .xlog-post-cover {
width: 100%;
height: 14rem;
margin: auto;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
border-radius: 0.625rem 0.625rem 0 0;
}

.xlog-posts>.xlog-post:nth-child(even) .xlog-post-cover {
width: 100%;
margin: auto;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
border-radius: 0.625rem 0.625rem 0 0;
}

.xlog-post>div:nth-of-type(1) {
width: 100%;
padding: 10px;
}

main {
max-width: 500px;
}
}