又名Nowhylogs
? /Juditkaramazov
?文件夹
☕博客
还记得我爱上... Astro
时候吗?好吧,我们又去了!打字稿的类型安全性和对开发人员友好的功能,反应的动态交互性和可重复使用的组件...以及Astro 。
如果您有机会从其特征性的灵活性和整洁的结果开始,请允许我提醒您,一旦Astro加入比赛,实现这样的目标就不会更容易。现在,以防万一,这是您需要Speed™瞬间的另一个需求,请考虑以下步骤。
打开终端并运行以下命令:
npm create astro@latest
甚至有起动模板可用:
# create a new project with an official example
npm create astro@latest -- --template < example-name >
# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template < github-username > / < github-repo >
最后:
npm run dev
容易,对吧?请随时检查Astro的文档或跳入他们的Discord服务器。享受骑行,宇航员! ?
提示
无论您决定做什么,请记住在与项目和平台本身互动时尊重行为准则。非常感谢您的时间和耐心!
几天前,我第一个没有为什么游戏 - DevLog条目如下:
随着八月这一天的最后一小时远离巴塞罗那,我们正在用一些怪异的,有缠绕的数字词来冷却屏幕,以解释该网站的性质和建筑。强烈的人类,天生的自发。
老实说,我花了很长时间才能将自己的思想表达到言语中 - 而且我花了更长的时间来收集必要的勇气和精神力量,最终创建一个可以作为我的不幸的有效代表的网站而不是一个“网站开发人员” - 我意识到自己的工作已经达到“软件”概念的海岸时停止使用的标签,而没有相关边框。
您还记得红辣椒的象征性公路Trippin吗? ( “你在开玩笑吗,朱迪特?这是一个杰作;我们记得!” ,嗯,好吧。很高兴再次见到你,伙计们。具体的原因,在大量的高潮之后,我再次默默地问自己:“我应该是谁?与太阳的那镜子相似。灵魂的镜子,如果有的话。
你们中有些人可能知道,我已经拥有一个私人博客,可以在其中分享我的一些想法,分析和胡说八道。但是,我仍然没有在可以坐下的篝火上工作,花时间消化video game development
的本质,并以“日记”或“开发博客”的形式代表旅行本身。我想这就是为什么存在Nowhylogs(一个personal devlog containing relevant information on my progress as an indie developer
)的原因。当雾变得太密集时,我们都需要找到自己的灯塔。
说到灯塔!以前的分数不是很可爱吗?
虽然简单而易于访问,但我付出了一些努力No Why Games - Devlog
我作为开发人员的意图和内在规则的镜子(另一个!),始终将performance
, accessibility
和best practices
放在首位。
“你是怎么做到的,朱迪特?绝对没有人问。让我分享几个秘密和功能,以便您可以看到?钥匙是什么?
毫无疑问,与Accessibility
的概念有关,都可以转化为每天要学习的可能性,怀疑和新事物的巨大海洋。但是,我想确保此Devlog as accessible as possible
(不仅要归功于适当的地标),这意味着您将能够通过使用:
Keyboard
VoiceOver
?q 提示
例如,您可以在运行iOS 17或更高版本的iPhone上打开配音。这可以通过设置 - >可访问性 - >旁白来完成。
OG图像,也称为“社交图像”(这是每当我们在Twitter,WhatsApp,Discord等平台上共享网站URL时显示的图像)在社交媒体参与中起着至关重要的作用 - 但是我们不喜欢通常有时间一一做好准备...对吗?正确的...? (也许我是唯一面对这个问题的人... )
尽管可以将默认的OG映像用作后备(在这种情况下public/nowhylogs-og.jpg
),但我想避免在没有其他任何其他情况下显示出帖子的同一图像的静态用法(甚至过度使用) Ogimage在前肌中指定。
多亏了Satori的库,能够将HTML和CSS转换为SVG(它具有局限性,就像尚未支持RTL语言一样...但是给它时间!不包括任何。然后,您会发现一个美丽的图像显示:
Post title
。Author name
。Site title
。如果您需要使用非拉丁字符,请记住在src/utils/loadGoogleFont.ts
中添加您喜欢的字体:
async function loadGoogleFonts (
text : string
) : Promise <
Array < { name : string ; data : ArrayBuffer ; weight : number ; style : string } >
> {
const fontsConfig = [
{
name : "IBM Plex Mono" ,
font : "IBM+Plex+Mono" ,
weight : 400 ,
style : "normal" ,
} ,
{
name : "IBM Plex Mono" ,
font : "IBM+Plex+Mono:wght@700" ,
weight : 700 ,
style : "bold" ,
} ,
]
// Rest of the code.
还记得您尝试在没有搜索工具的网站上找到特定的东西的很多次吗?亲爱的陌生人,您祈祷的神灵说了什么?不再说!由于直到这些天,我通常也会发生这种情况,因此我再次提供了一个全局搜索,由Fuse.js(一个轻巧的模糊搜索库)授权,其依赖关系为零!
有关更多信息,请随时访问:
提示
鉴于我已经在当天使用了fuse.js,因此您还可以检查我在深爱的Karamablog中如何实现它。我保证你不会后悔!
您已经戴太阳镜了吗?不需要。正如如今的强制性,我还合并了一个theme switcher
以增强读者的视觉体验。为什么?因为即使它说“ Devlog”,它仍然是一个博客 - 我们的视网膜对我们来说应该很重要!
有关此特定功能及其组件的更多信息,请查看:
“我们可以停止一次讨论Seo-whithys吗?” ,不完全,不是!如果这是讨论的问题,那就是仅仅因为它的存在可能会在某些方面使我们受益。让我解释一下:
我们称为“ SEO友好的内容”是以帮助搜索引擎对其进行排名的方式创建的内容类型 - 不,这并不全是关键字。有趣的是,我们所谓的“ SEO”确实是为了帮助搜索引擎查找,理解和将您的内容连接到您要涵盖的主题。
还记得我们之前讨论过的dynamic ogImage
吗?即使是这样的图像(开放图)也可用于社交媒体共享和SEO ...这只是其中的一部分!
让我们看一下我们的config.ts文件,例如:
export const SITE : Site = {
website : "https://nowhylogs.vercel.app/" ,
author : "Judit Lázaro" ,
desc : "A minimal devlog containing No Why Games' misadventures." ,
title : "No Why Games - Devlog" ,
ogImage : "nowhylogs-og.jpg" ,
lightAndDarkMode : true ,
postPerPage : 3 ,
scheduledPostMargin : 15 * 60 * 1000 ,
}
所有这些元素(包括规范URL,社交卡等)对于使我们的网站易于爬行和索引搜索引擎至关重要,从而使搜索引擎结果的可见性更好。
众所周知,RSS是一个Web提要,允许用户和应用程序以标准化的计算机可读格式访问对网站的更新。如果您想快速通过您和我的原木与您相关的兴趣迅速除草……请随时按一下波浪状按钮! ?
import rss from "@astrojs/rss"
import { getCollection } from "astro:content"
import getSortedPosts from "@utils/getSortedPosts"
import { SITE } from "@config"
export async function GET ( ) {
const posts = await getCollection ( "blog" )
const sortedPosts = getSortedPosts ( posts )
return rss ( {
title : SITE . title ,
description : SITE . desc ,
site : SITE . website ,
items : sortedPosts . map ( ( { data , slug } ) => ( {
link : `posts/ ${ slug } /` ,
title : data . title ,
description : data . description ,
pubDate : new Date ( data . modDatetime ?? data . pubDatetime ) ,
} ) ) ,
} )
}
越容易,越好!
您可以使用美丽的终端从项目的根部运行所有命令:
命令 | 行动 |
---|---|
npm install | 安装依赖项。 |
npm run dev | 在localhost:4321 启动本地开发服务器。 |
npm run build | 将您的生产网站构建为./dist/ |
npm run preview | 在本地预览您的构建。 |
npm run format:check | 使用漂亮的检查代码格式。 |
npm run format | 格式代码更漂亮。 |
npm run sync | 为所有Astro模块生成打字稿类型。在这里了解更多。 |
npm run lint | 用eslint的皮棉。 |
docker compose up -d | 在Docker上运行NowHylogs。 |
docker compose run app npm install | 将上面的任何命令运行到Docker容器中。 |
docker build -t nowhylogs . | 为Nowhylogs构建Docker映像。 |
docker run -p 4321:80 nowhylogs | 在Docker上运行NowHylogs。该网站将在http://localhost:4321 访问。 |
啊,是的...样式,样式...!
首先,让我分享一些使本网站存在的关键要素:
但是,这只是这个小项目背后的真实作品(人类)的最小部分。
至于调色板本身,既然游戏是什么原因,那么我不得不(稍微)与我习惯的风格(略微)距离,就像您可以在我的个人投资组合和博客中看到的那样。这个距离以及对我自己的新近似(现在是独立开发人员),没有周围的极其知名的艺术家是不可能的:@aunedelec。
首先,请允许我说我为破坏您令人难以置信的美丽徽标感到非常遗憾,但事实证明,我是您一生中最糟糕的艺术家。除了所有的笑话,如果不是我们在维也纳分享咖啡时的对话,您的耐心,支持,敏锐的眼睛和极端技能,我永远不会勇于以不限于写作的方式拥抱视频游戏,说话并思考它们。
如果我想在这里添加一些东西:“谢谢您的才华,支持和公司”,那是一个巨大的:“谢谢您成为我一生的一部分”。无论有时候天空看起来有多黑,那些云总是在阳光前苍白……而格勒诺布尔(Grenoble)有着阳光灿烂的阳光,可以从阳台上欣赏!
Los Jugadores的儿子Mis Amigos 。也就是说,我无法关闭我令人不安的生活的新章节,而没有大声而真诚: Thank you! ?
。
对于我们惊人的赞助商@Entreprises LEMRHALI
, thank you so much
您的支持,镇定,知识,耐心和整个存在。最近,“不确定性”是一项在我们的土地周围散布着相当巨大的阴影的作品 - 当我说我想改变现实时,相信我,如果我有可能这样做(我在哪里忘记了我的魔术魔杖时间?但是,我确实相信,一切都会比晚些时候找到它的位置。
正如某人曾经说过的那样:
从阿拉巴马州跑到芝加哥的州际公路(六十五),跑到了芝加哥。在肯塔基州的这一部分,应该退出时间,但日光不会摇晃。太阳不会消失。
转化为: Hay Esperanza。
这项工作生活在麻省理工学院许可证的强大,温暖和美丽的屋顶下;无论视觉或书面内容从中造成了什么,您始终找到适当的参考,以指定其背后的作者和网站。
如今,归因至关重要,直接或间接参与该项目的人都应该得到最佳认可。也就是说,只有当您喜欢在这里发现的东西时,请记住,如果您...