Obsidian+Picgo+Obsius构建简易个人页
- Pre(前因后果其实很复杂但写完感觉很啰嗦遂删除)
- 成品
- 说明
- Github
- Picgo
- Obsidian
- Obsius Publish
- 其他
- 花絮
Pre(前因后果其实很复杂但写完感觉很啰嗦遂删除)
写markdown 3年，用obsidian 2年
正逢Obsius插件更新完毕又能使用了（是指去年8~9月左右），突发奇想要不我们用这些七零八落的东西构建简陋的网站这样ob里的内容就可以挂出去了
成品
https://obsius.site/5a3g015d1b1325594r5c（这是为了写教程另外建的，我建的那坨不公开）
说明
我们的目标是：
搭建简易网站，并实现显示文字图片、播放音乐视频、链接页面跳转
ps：网站和网页的区别（写到一半突然想起来这个所以加一句）
网页：构成网站的基本元素
网站：由多个相关联的网页组成构成一个网上系统
所以我们做的是一个网站（？）
我们的实现步骤是：
具象的说，在github建立仓库，找到picgo出纳员，在obsidian工厂一顿干，再请obsius按要求上架橱窗。
这样你就可以在厂外面通过橱窗看到干出来的东西并且可以简单跟橱窗交互
Github
搭建图床。
新建一个仓库，如下
创建完了去整一个token，接下来点击右上角，出现一个菜单，点击settings，再往左下看，点击这个developer settings
再点击这里获取token
note是给这个token写个标记，相当于起个名，过期可以选永不过期，repo勾上，然后点击下面的generate token
然后你就会看到一个token（别看我的，已经删了），一定要记好，复制保存起来，因为这个token只给你看一次，然后我们要把这个token给到图床管理工具picgo
Picgo
应该是目前最好用的图床管理工具。
直接搜索下载，官网：https://molunerfinn/PicGo/?ref=jiaochengbar
picgo是搭建图床的关键，想更了解picgo建议先读读文档：
https://picgo.github.io/PicGo-Doc/zh/guide/
https://picgo.github.io/PicGo-Doc/zh/guide/getting-started.html
可以看见它支持的图床有哪些，github在列。
如果你的图床不在github也可以用（我在SM.MS也有一个小图床，因为github做图床一般需要科学上网才能看到图，所以又安了一个以备不时之需）
不过picgo要求你先安装node.js，直接官网下载就可以：https://nodejs/zh-cn
下载安装好了之后它有可能不会打开对话框子，而且无论你双击图标多少次都不会打开
不要怕，不要急，实际上已经安装成功了，点击任务栏的右下角去找
打开picgo之后出现差不多这样子的界面
现在点击图床设置–github进行配置。
首先图床配置名起个名，比如default
仓库名填写用户名/仓库名，比如你的github用户名是hello，仓库名是test000，就写hello/test000
分支名写个main
token粘贴进去
下面两个参数想搞就搞搞
（不确定信息的去github看看，别整错了）
配置完成之后picgo就知道拿到图片之后往哪放了
Obsidian
obsidian是用来写内容的双链笔记软件简称ob
这种软件还有很多种，跟picgo的互连方式有些区别，具体情况具体操作这里讲ob
安装非常快捷，只要去官网下载就完事了：https://obsidian.md/
如果没有用过类似的软件打开之后很迷茫建议可以先自己搞两下看看怎么使用
很傻瓜式的这里就不赘述了
打开后找到设置，我的是这样的：
此处点击第三方插件，然后关闭安全模式，这样才能安装其他插件
打开插件市场，搜索下载这个插件：image auto upload
是的，not tested on Mac，我是win11不知道苹果的能不能使，后来查了一下外面朋友的反馈mac是可以用的，一样使
设置页打开剪切板自动上传，这样粘贴到obsidian里的图片就会自动上传到github并且拥有一个链接，这个可以在picgo中看到
好的现在obsidian里的图片就可以通过这个插件自动上传到仓库了
当你在页面上书写，粘贴图片进去，图片就会变成一行链接，就像这样
从picgo的相册栏能够看到传上去的东西
现在我们来回想一下picgo的上传页面是怎么写的？
将文件拖拽到此处
聪明的你一定想到了吧，图片是文件，音乐是文件，视频也是文件
而github仓库就是个框什么都能装，picgo什么都能出纳，那么我们当然也能用同样方式去上传音乐和视频等文件
在文件管理方面我们最好能把不同的东西归到不同的类目中，我也是开了另外仓库来装音频（但是我很邋遢经常乱传）
做法也非常简单只要在图床设置中添加新的仓库就可以，当然在github上也要去建立新的仓库，如法炮制
在上传时，记得更改此处的设置，否则就会像我一样音频视频贴图传得乱七八糟了
Obsius Publish
用来发布页面的插件
打开插件市场，搜索下载
这里要再说一下，下载完插件一定要确保这里是启用状态这时候插件才会工作
现在来到空白笔记页面中，按下ctrl+p调出菜单栏输入obsius就可以看到指令
从上到下分别是：
- 复制页面链接
- 发布页面
- 移除页面
- 看看发了哪些
或者你可以找到页面右上角这3个点，打开菜单往下滑看到3个常用指令
到这个程度相信聪明的你已经会玩了所以
现在写点东西开始建站吧！
现在可以开始大显身手了，在obsidian里打开一个空白页面写什么都行，排版、按键、日历、相册、画廊、博客、简历，as you like
btw我不太会写成体系的html只会往里面加东西因为我需求就是文字加图片其他炫酷功能的排版的不会不过在这个框架下搞搞也不成问题如果你需要的话test页面的代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Money</title>
<style>
body {
overflow-y: scroll;
background-color: #f0f0f0;
position: relative;
height: 200vh;
}
.money {
position: absolute;
font-size: 15px;
animation: float 15s linear infinite;
}
@keyframes float {
0% {
top: -10px;
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(var(--random-offset));
opacity: 1;
}
100% {
top: 150vh;
opacity: 0;
}
}
</style>
</head>
<body>
<script>
for (let i = 0; i < 10; i++) {
const money = document.createElement('div');
money.classList.add('money');
money.innerText = '💰'; // 过大年撒点钱
const randomOffset = (Math.random() - 0.5) * 100; // 随机水平位移值
money.style.left = Math.random() * 100 + 'vw'; // 随机初始水平位置
money.style.setProperty('--random-offset', randomOffset + 'vw'); // CSS
money.style.animationDelay = Math.random() * 15 + 's'; // 随机delay
document.body.appendChild(money);
}
</script>
</body>
</html>
<body style="background-color: white;">
<div style="text-align: center;">
<img src="**" alt="Left Image" style="width: 30px; height: 30px; display: inline-block;margin-bottom: 45px;">
<span style="font-size: 32px; font-weight: bold; display: inline-block; margin: 90 30px;">test-test</span>
<img src="**" alt="Right Image" style="width: 30px; height: 30px; display: inline-block;margin-bottom: 45px;transform: scaleX(-1);"> </div>
<br>
<div style="text-align: center;">
<a href="**" >
<button style="padding: 10px 20px; background-color: white; color: black; border: none; cursor: pointer; transition: box-shadow 0.3s ease;">
001
</button>
</a>
<a href="**" >
<button style="padding: 10px 20px; background-color: white; color: black; border: none; cursor: pointer; transition: box-shadow 0.3s ease;">
002
</button>
</a>
<a href="**" >
<button style="padding: 10px 20px; background-color: white; color: black; border: none; cursor: pointer; transition: box-shadow 0.3s ease;">
003
</button>
</a>
</div>
<style>
button:hover {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
</body>
<div> <img src="**" alt="Centered Image" style="display: block; margin: 0 auto; max-width: 100%; height: auto;"> </div>
<audio src="**" controls style="display: block; margin-left: auto; margin-right: auto; width: 100%;">
</audio>
<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
<video src="**" controls width="500">
</video>
</div>
此处可以找到你的AI朋友让它帮忙写
记得找个东西记录一下哪个url是哪个页面要不然很容易会忘记
其他
致命问题：
1，它不能用qq和微信分享给别人，只能在浏览器输入网址，obsius出去的网页都是这样子
2，图床在github，国内只有翻墙才能看见图，下面这篇用Gitee搭图床的参考参考吧https://blog.csdn/m0_49448331/article/details/136899591
其他工具和方法：
使用notion、飞书的用户没有这种问题，notion、飞书可以发布公开的页面，跟自己的网站没什么区别。
wolai、蓝湖啥的都是致敬了notion，当时用wolai时也有这个功能，后来有些重要功能收钱了我就跑路了，且考量到数据在本地更安全，转移到obsidian（当时还看了logseq，感觉起来还是ob自由度更高，但搭用外面的图床了数据就不是百分百本地了哈），当然了notion是真的好，用过都说好。
飞书很适合团队合作，自己做东西也很好。
除此之外使用R语言和google工具也都分别能构建出个人网站，以及，不依赖这些东西，直接上github修改README都能够做出个人网站，这些的教程满地都是而且都是0元开发，不过拿obsius搞的在我搞之前还没见过（也可能是见得人太少了）。
下一步计划：
加强交互，尝试展示3D模型，以及增加留言板类似功能（预计可能会受到obsius的功能限制）
花絮
又是翻船的一天
发布评论