NoWhyLogs
1.0.0
aka nowhylogs
- /juditkaramazov
- ผลงาน
☕บล็อก
จำได้ไหมว่าเมื่อฉันตกหลุมรัก ... Astro ? เราไปที่นี่อีกครั้ง! ความปลอดภัยประเภทของ TypeScript และคุณสมบัติที่เป็นมิตรกับนักพัฒนา, การโต้ตอบแบบไดนามิกของ React และส่วนประกอบที่นำกลับมาใช้ใหม่ได้ ... และ 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 ดังนี้:
เมื่อเวลาผ่านไปในวันสุดท้ายของวันนี้ของเดือนสิงหาคมคืบคลานออกไปจากบาร์เซโลนาเรากำลังทำให้หน้าจอของเราเย็นลงด้วยคำดิจิทัลที่แปลกประหลาดที่อธิบายถึงธรรมชาติและสถาปัตยกรรมของเว็บไซต์นี้ มนุษย์อย่างดุเดือดโดยธรรมชาติ
ในความซื่อสัตย์ทั้งหมดฉันใช้เวลาค่อนข้างนานในการพูดความคิดของฉันเป็นคำพูด - และฉันต้องใช้เวลานานกว่าในการรวบรวมความกล้าหาญและความแข็งแกร่งทางจิตใจที่จำเป็นในที่สุด กว่า "ผู้พัฒนาเว็บไซต์" - ฉลากที่ฉันหยุดใช้เมื่อฉันรู้ว่างานของฉันมาถึงชายฝั่งของแนวคิดของ "ซอฟต์แวร์" โดยไม่มีพรมแดนที่เกี่ยวข้องอีกต่อไป
คุณจำ Red Hot Chili Pepper Road Trippin 'ได้หรือไม่? ( "คุณล้อเล่น Judit หรือไม่มันเป็นผลงานชิ้นเอกแน่นอนเราจำได้!" อืมดียินดีที่ได้พบคุณอีกครั้ง) "แค่กระจกสำหรับดวงอาทิตย์" เป็นหนึ่งในบรรทัดเหล่านั้น เหตุผลที่เฉพาะเจาะจงและหลังจากเสียง สูง และต่ำสุดช่วงเวลาที่ฉันถามตัวเองอีกครั้งอย่างเงียบ ๆ : "ฉันควรจะเป็นใคร?" คล้ายกับ กระจกสำหรับดวงอาทิตย์ กระจกสำหรับวิญญาณถ้ามีอะไร
อย่างที่คุณบางคนอาจรู้ว่าฉันเป็นเจ้าของบล็อกส่วนตัวที่ฉันสามารถแบ่งปันความคิดการวิเคราะห์และไร้สาระของฉัน อย่างไรก็ตามฉันยังไม่ได้ทำงานกับกองไฟที่ฉันสามารถนั่งใช้เวลาในการย่อยสาระสำคัญของ video game development และเป็นตัวแทนของการเดินทางในรูปของ "ไดอารี่" หรือ "บล็อก dev" นั่นเป็นเหตุผลที่ nowhylogs ( personal devlog containing relevant information on my progress as an indie developer ) มีอยู่ฉันคิดว่า เมื่อหมอกหนาแน่นเกินไปเราทุกคนต้องหาประภาคารของเราเอง
พูดถึงประภาคาร! คะแนนก่อนหน้านี้ไม่ น่ารัก เหรอ?
accessibility ขณะที่เรียบง่ายและเข้าถึงได้ฉันใช้ความพยายามในการทำ No Why Games - Devlog best practices Mirror (อีกอันหนึ่ง!) performance ความตั้งใจและกฎภายในของฉันในฐานะนักพัฒนา
"คุณทำอย่างนั้นได้อย่างไรผู้พิพากษา ถามไม่มีใครขอให้ฉันแบ่งปันความลับและคุณสมบัติสองสามอย่างเพื่อที่คุณจะได้เห็นว่า คีย์ คืออะไร? แล้ว
ไม่ต้องสงสัยเลยว่าอะไรก็ตามที่เกี่ยวข้องกับแนวคิดของ Accessibility แปลเป็นมหาสมุทรอันยิ่งใหญ่แห่งความเป็นไปได้สงสัยและสิ่งใหม่ ๆ ที่จะเรียนรู้ในแต่ละวัน อย่างไรก็ตามฉันต้องการให้แน่ใจว่า devlog นี้สามารถ as accessible as possible (และไม่เพียง แต่ต้องขอบคุณสถานที่สำคัญที่เหมาะสม) ซึ่งหมายความว่าคุณจะสามารถนำทางได้โดยใช้:
KeyboardVoiceOver ? ️ เคล็ดลับ
ตัวอย่างเช่นคุณสามารถเปิดการพากย์เสียงบน iPhone ที่ใช้ iOS 17 ขึ้นไป สามารถทำได้จากการตั้งค่า -> การเข้าถึง -> เสียงพากย์
OG Images หรือที่รู้จักกันในชื่อ "ภาพโซเชียล" (นี่คือภาพที่แสดงเมื่อใดก็ตามที่เราแบ่งปัน URL เว็บไซต์ของเราบนแพลตฟอร์มเช่น Twitter, WhatsApp, Discord ฯลฯ ) มีบทบาทสำคัญในการมีส่วนร่วมของโซเชียลมีเดีย - แต่เราไม่ได้ ' โดยปกติแล้วจะมีเวลาเตรียมพวกเขาทีละคน ... ใช่ไหม? ขวา...? ( บางทีฉันอาจเป็นคนเดียวที่ประสบปัญหานี้ ... )
แม้ว่าจะเป็นไปได้ที่จะใช้อิมเมจ OG เริ่มต้นเป็นทางเลือก (ในกรณีนี้ public/nowhylogs-og.jpg ) แต่ฉันต้องการหลีกเลี่ยงการใช้งานแบบคงที่ (และแม้แต่การใช้งานมากเกินไป) ของภาพเดียวกันที่แสดงโพสต์หลังจากโพสต์เมื่อใดก็ตาม Ogimage ถูกระบุไว้ใน frontmatter
ต้องขอบคุณห้องสมุดของ Satori ที่สามารถแปลง HTML และ CSS เป็น SVG (มีข้อ จำกัด เช่นภาษา RTL ที่ยังไม่ได้รับการสนับสนุน ... แต่ให้เวลา!) มันเป็นไปได้ที่จะ สร้างภาพ OG แบบไดนามิก อย่ารวม จากนั้นคุณจะพบภาพที่สวยงามที่แสดง:
Post titleAuthor nameSite 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 ได้ครั้งเดียวตัดสินได้หรือไม่" ไม่ มากนัก ! หากเป็นเรื่องของการสนทนามันเป็นเพราะการมีอยู่ของมันอาจเป็นประโยชน์ต่อเราในบางวิธี ให้ฉันอธิบาย:
สิ่งที่เราเรียกว่า "เนื้อหาที่เป็นมิตรกับ 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 เป็นเว็บฟีดที่อนุญาตให้ผู้ใช้และแอปพลิเคชันเข้าถึงการอัปเดตไปยังเว็บไซต์ในรูปแบบที่อ่านได้มาตรฐานคอมพิวเตอร์ หากคุณรู้สึกว่าวัชพืชอย่างรวดเร็วผ่านสิ่งที่คุณสนใจ และ บันทึกของฉันเกิดขึ้นกับคุณ ... อย่าลังเลที่จะกดปุ่มหยัก! -
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 | เริ่มเซิร์ฟเวอร์ dev ท้องถิ่นที่ localhost:4321 |
npm run build | สร้างเว็บไซต์การผลิตของคุณเป็น ./dist/ |
npm run preview | ดูตัวอย่างงานสร้างของคุณในพื้นที่ |
npm run format:check | ตรวจสอบรูปแบบรหัสด้วย Prettier |
npm run format | รหัสฟอร์แมตด้วยสวยกว่า |
npm run sync | สร้างประเภท TypeScript สำหรับโมดูล Astro ทั้งหมด เรียนรู้เพิ่มเติมที่นี่ |
npm run lint | ผ้าสำลีกับ ESLINT |
docker compose up -d | เรียกใช้ Nowhylogs บน Docker |
docker compose run app npm install | เรียกใช้คำสั่งใด ๆ ด้านบนลงในคอนเทนเนอร์ Docker |
docker build -t nowhylogs . | สร้างภาพนักเทียบท่าสำหรับ Nowhylogs |
docker run -p 4321:80 nowhylogs | เรียกใช้ Nowhylogs บน Docker เว็บไซต์จะสามารถเข้าถึงได้ที่ http://localhost:4321 |
อ่าใช่ ... สไตล์สไตล์ ... !
สิ่งแรกสิ่งแรกให้ฉันแบ่งปันองค์ประกอบสำคัญบางอย่างที่ทำให้การดำรงอยู่ของเว็บไซต์นี้เป็นไปได้:
อย่างไรก็ตามนั่นเป็นเพียง ส่วนน้อยที่สุด ของงานจริง (มนุษย์) ที่อยู่เบื้องหลังโครงการเล็ก ๆ นี้
สำหรับชุดสีเองตอนนี้ไม่มีเหตุผลว่าทำไมเกมถึงเป็นเรื่องฉันต้องห่างจากสไตล์ที่ฉันคุ้นเคยอย่างที่คุณจะได้เห็นในพอร์ตโฟลิโอและบล็อกส่วนตัวของฉัน ระยะทางนี้รวมถึงการประมาณใหม่ให้กับตัวเอง (ตอนนี้ผู้พัฒนาอินดี้) คงเป็นไปไม่ได้หากไม่มีศิลปินที่รู้จักกันดีมากที่นี่: @aunedelec
ให้ฉันเริ่มต้นด้วยการบอกว่าฉันเสียใจเป็นอย่างยิ่งที่ทำลายโลโก้ที่สวยงามอย่างไม่น่าเชื่อของคุณ แต่กลับกลายเป็นว่าฉันเป็นศิลปินที่แย่ที่สุดที่คุณจะพบ มาตลอดชีวิต เรื่องตลกทั้งหมดถ้าไม่ใช่สำหรับการสนทนาของเราในขณะที่แบ่งปันกาแฟในเวียนาความอดทนของคุณการสนับสนุนตากระตือรือร้นและทักษะที่รุนแรงฉันจะไม่รวบรวมความกล้าหาญที่จะโอบกอดวิดีโอเกมในแบบที่ไม่ จำกัด เฉพาะ การเขียน พูดและคิดถึงพวกเขา
หากมีบางสิ่งที่ฉันต้องการเพิ่มที่นี่นอกเหนือจาก: "ขอบคุณสำหรับความสามารถการสนับสนุนและ บริษัท " นั่นเป็นสิ่งที่ยิ่งใหญ่: "ขอบคุณที่เป็นส่วนหนึ่งในชีวิตของฉัน" ไม่ว่าบางครั้งท้องฟ้าจะมืดแค่ไหนเมฆเหล่านั้นก็จะซีดอยู่ตรงหน้าดวงอาทิตย์ ... และ Grenoble มีแสงแดดที่สวยงามที่จะชื่นชมจากระเบียง!
Los Jugadores ลูกชาย Mis Amigos ที่กล่าวว่าฉันไม่สามารถปิดบทใหม่ของชีวิตที่น่ารำคาญของฉันโดยไม่ต้องส่งเสียงดังและจริงใจ: Thank you! ? -
สำหรับสปอนเซอร์ที่น่าทึ่งของเรา @Entreprises LEMRHALI thank you so much สำหรับการสนับสนุนความสงบความรู้ความอดทนและการดำรงอยู่ทั้งหมดของคุณ เมื่อเร็ว ๆ นี้ "ความไม่แน่นอน" เป็นงานที่แพร่กระจายไปทั่วดินแดนของเรา - และเชื่อฉันเมื่อฉันบอกว่าฉันชอบที่จะเปลี่ยนความจริงนั้นถ้ามันเป็นไปได้ที่ฉันจะทำเช่นนั้น (ฉันลืมเวทมนตร์ของฉันได้ที่ไหน เวลา? อย่างไรก็ตามฉัน เชื่อ ว่าทุกอย่างจะพบสถานที่ของมันเร็วกว่าในภายหลัง
อย่างที่เคยมีคนเคยพูดว่า:
ทางหลวงระหว่างรัฐ-หกสิบห้า-วิ่งจากอลาบามาจนถึงแค่ขี้อายของชิคาโก มันควรจะเลิกใช้เวลาในส่วนนี้ของรัฐเคนตักกี้ แต่เวลากลางวันก็จะไม่สั่นคลอน ดวงอาทิตย์จะไม่หายไป
ซึ่งแปลเป็น: Hay Esperanza
งานนี้อาศัยอยู่ภายใต้หลังคาที่แข็งแกร่งอบอุ่นและสวยงามของใบอนุญาต MIT; ไม่ว่าเนื้อหาที่เป็นภาพหรือการเขียนจะเป็นอย่างไรคุณจะพบการอ้างอิงที่เหมาะสมโดยระบุผู้เขียนและเว็บไซต์ที่อยู่เบื้องหลัง
การอ้างเหตุผลเป็นสิ่งจำเป็นในทุกวันนี้และใครก็ตามที่มีส่วนร่วมโดยตรง หรือ โดยอ้อมในโครงการนี้สมควรได้รับการยอมรับที่ดีที่สุดเท่าที่จะเป็นไปได้ ที่กล่าวว่าและถ้าคุณสนุกกับสิ่งที่คุณพบที่นี่โปรดจำไว้ว่าคุณสามารถทำให้ไดโนเสาร์มีความสุขมากถ้าคุณ ...
