又名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。
這項工作生活在麻省理工學院許可證的強大,溫暖和美麗的屋頂下;無論視覺或書面內容從中造成了什麼,您始終找到適當的參考,以指定其背後的作者和網站。
如今,歸因至關重要,直接或間接參與該項目的人都應該得到最佳認可。也就是說,只有當您喜歡在這裡發現的東西時,請記住,如果您...