آیا می خواهید یک وب سایت استاتیک سریع، کارآمد و قابل تنظیم بسازید؟ VuePress و Markdown ترکیبی قدرتمند برای دستیابی به این هدف هستند. در این راهنما، تمام مراحل ساخت یک وب سایت با استفاده از این دو فناوری را به شما آموزش می دهیم.
VuePress یک مولد سایت استاتیک (Static Site Generator) است که برای ساخت مستندات فنی، وبلاگ ها و وب سایت های ساده مناسب است. Markdown یک زبان نشانه گذاری سبک است که به شما امکان می دهد محتوای خود را به سادگی و بدون نیاز به دانش HTML بنویسید. ترکیب این دو، فرآیند توسعه وب را بسیار سریع تر و آسان تر می کند.
ابتدا باید Node.js و npm (Node Package Manager) را روی سیستم خود نصب کنید. سپس، با استفاده از npm، VuePress را به صورت سراسری نصب کنید:
npm install -g vuepress
بعد از نصب، یک پوشه برای وب سایت خود ایجاد کنید و به آن وارد شوید:
mkdir my-website
cd my-website
سپس، فایل `package.json` را ایجاد کنید:
npm init -y
در نهایت، VuePress را به عنوان یک dependency محلی نصب کنید:
npm install -D vuepress@next
VuePress به یک ساختار پوشه ای خاص نیاز دارد. در ریشه پروژه، یک پوشه به نام `.vuepress` ایجاد کنید. در داخل این پوشه، یک فایل به نام `config.js` ایجاد کنید که تنظیمات اصلی وب سایت شما در آن قرار می گیرد.
mkdir .vuepress
touch .vuepress/config.js
محتوای `config.js` می تواند به شکل زیر باشد:
module.exports = {
title: 'وب سایت من',
description: 'توضیحات وب سایت من'
}
همچنین، یک فایل `README.md` در ریشه پروژه ایجاد کنید که صفحه اصلی وب سایت شما خواهد بود.
touch README.md
حالا می توانید شروع به نوشتن محتوای وب سایت خود با استفاده از Markdown کنید. Markdown یک زبان نشانه گذاری ساده است که به شما امکان می دهد متن، تصاویر، لینک ها و سایر عناصر را به راحتی فرمت کنید.
به عنوان مثال، محتوای `README.md` می تواند به شکل زیر باشد:
# خوش آمدید به وب سایت من
این صفحه اصلی وب سایت من است.
برای اجرای وب سایت، اسکریپت های زیر را به فایل `package.json` اضافه کنید:
"scripts": {
"dev": "vuepress dev .",
"build": "vuepress build ."
}
سپس، با استفاده از دستور `npm run dev` وب سایت را در حالت توسعه اجرا کنید:
npm run dev
وب سایت شما در آدرس `http://localhost:8080` قابل مشاهده خواهد بود.
VuePress به شما امکان می دهد قالب و ظاهر وب سایت خود را به طور کامل سفارشی کنید. می توانید تم های آماده را استفاده کنید یا تم خود را ایجاد کنید. همچنین، می توانید کامپوننت های Vue.js را به وب سایت خود اضافه کنید.
برای سفارشی سازی تم، یک پوشه به نام `theme` در داخل پوشه `.vuepress` ایجاد کنید. سپس، فایل های تم را در این پوشه قرار دهید.
mkdir .vuepress/theme
بعد از اینکه وب سایت خود را ساختید و سفارشی کردید، می توانید آن را منتشر کنید. برای این کار، ابتدا با استفاده از دستور `npm run build` وب سایت را build کنید:
npm run build
این دستور یک پوشه به نام `dist` در ریشه پروژه ایجاد می کند که حاوی فایل های استاتیک وب سایت شما است.
سپس، می توانید این فایل ها را روی یک سرور وب آپلود کنید. می توانید از سرویس های میزبانی مانند Netlify، Vercel یا GitHub Pages استفاده کنید.
VuePress یک مولد سایت استاتیک است که برای ساخت مستندات فنی، وبلاگ ها و وب سایت های ساده مناسب است.
Markdown یک زبان نشانه گذاری سبک است که به شما امکان می دهد محتوای خود را به سادگی و بدون نیاز به دانش HTML بنویسید.
می توانید تم های آماده را استفاده کنید یا تم خود را ایجاد کنید. برای سفارشی سازی تم، یک پوشه به نام `theme` در داخل پوشه `.vuepress` ایجاد کنید و فایل های تم را در این پوشه قرار دهید.
با استفاده از دستور `npm run build` وب سایت را build کنید. سپس، فایل های استاتیک را روی یک سرور وب آپلود کنید. می توانید از سرویس های میزبانی مانند Netlify، Vercel یا GitHub Pages استفاده کنید.
اگر در ساخت وب سایت خود با VuePress و Markdown به مشکل برخوردید یا نیاز به کمک تخصصی دارید، با ما تماس بگیرید. ما در زمینه توسعه وب و بهینه سازی SEO تخصص داریم و می توانیم به شما در رسیدن به اهدافتان کمک کنیم.
با ما تماس بگیرید: 09190994063 - 09376846692