GitHub Pages: இலவச இணையதள ஹோஸ்டிங், படிப்படியாக எப்படி வெளியிடுவது

GitHub Pages என்றால் என்ன

GitHub Pages என்பது GitHub-இல் உள்ளமைந்த, நிலையான இணையதளங்களுக்கான இலவச ஹோஸ்டிங். இணையதளத்தின் கோப்புகளை ஒரு சாதாரண Git களஞ்சியத்தில் சேமிக்கிறீர்கள்; GitHub அவற்றை HTTPS வழியாக உங்கள் சார்பாக வழங்குகிறது. சரியான கிளைக்கு ஒவ்வொரு git push-உம் தளத்தைப் புதுப்பிக்கிறது; தனி FTP, ஹோஸ்டிங் பலகை அல்லது கைமுறைப் பதிவேற்றம் தேவையில்லை.

தேடலில் இந்தச் சேவை பல பெயர்களில் தேடப்படுகிறது: «github pages», «github pages இலவசம்», சில நேரங்களில் «git pages என்றால் என்ன». ஆனால் சரியான பெயர் GitHub Pages: இது Git-இன் அம்சம் அல்ல, GitHub தளத்தின் அம்சம். Git எதையும் வெளியிடுவதில்லை; அது மாற்றங்களின் வரலாற்றை மட்டுமே வைத்திருக்கிறது.

GitHub Pages பெரும்பாலும் திட்ட ஆவணங்கள், தனிப்பட்ட பக்கங்கள் மற்றும் போர்ட்ஃபோலியோக்கள், வலைப்பதிவுகள், landing பக்கங்கள், கற்றல் திட்டங்கள், மற்றும் கட்டமைத்த பின் React, Vue, Svelte போன்ற frontend பயன்பாடுகளின் டெமோக்களுக்கு பயன்படுகிறது.

Git pages: நிலையான உள்ளடக்கத்துக்கான ஹோஸ்டிங்

முக்கிய சொல் «நிலையான». GitHub Pages உலாவிக்குத் தயாரான கோப்புகளை அனுப்புகிறது: HTML, CSS, JavaScript, படங்கள், எழுத்துருக்கள், JSON கோப்புகள். சேவையகத்தில் குறியீட்டை இயக்காது: சேவையகப் பக்க PHP, Python, Node.js எதுவும் வேலை செய்யாது; தரவுத்தளங்களும் வேலை செய்யாது. உங்கள் தளத்துக்கு பதிவு, வணிக வண்டி அல்லது தரவுத்தளத்துடன் கூடிய நிர்வாகப் பக்கம் தேவைப்பட்டால், சாதாரண ஹோஸ்டிங் அல்லது கிளவுட் தளம் தேவைப்படும்.

ஆனால் JavaScript உலாவியில் வழக்கம்போல் இயங்கும். ஒற்றைப் பக்கப் பயன்பாடு வெளி API-களை அழைக்கலாம், படிவங்களை மூன்றாம் தரப்புச் சேவைகள் வழியாக அனுப்பலாம், தளத்தினுள் தேடலை வாடிக்கையாளர் பக்கத்திலேயே செய்யலாம்.

GitHub Pages-இல் உள்ள தள வகைகள்

GitHub Pages-இல் மூன்று வகையான தளங்கள் உள்ளன; வகையைப் பொறுத்தே முகவரி அமைகிறது.

ஒரு கணக்குக்கு பயனர் அல்லது நிறுவனத் தளம் ஒன்று மட்டுமே இருக்கலாம்; திட்டத் தளங்கள் எத்தனை வேண்டுமானாலும் இருக்கலாம், ஒரு களஞ்சியத்துக்கு ஒன்று. தனிப்பட்ட தளத்தின் களஞ்சியப் பெயர் உங்கள் GitHub உள்நுழைவுப் பெயருடன் சரியாகப் பொருந்த வேண்டும்: உங்கள் பெயர் ivan-petrov என்றால் களஞ்சியம் ivan-petrov.github.io என்று இருக்க வேண்டும்.

பொதுக் களஞ்சியங்களுக்கு இலவசத் திட்டத்தில் Pages கிடைக்கும். தனியார் களஞ்சியத்திலிருந்து வெளியிட GitHub-இன் கட்டணத் திட்டங்கள் தேவை; ஆனால் வெளியிட்ட தளம் எப்படியும் இணையத்தில் அனைவருக்கும் தெரியும்.

GitHub Pages-இல் தளத்தை படிப்படியாக வெளியிடுவது எப்படி

எளிய வழியைப் பார்ப்போம்: தயாரான HTML கோப்புகள், ஒரு கிளையிலிருந்து வெளியீடு. GitHub கணக்கும், நிறுவப்பட்ட Git-உம் தேவை.

படி 1. களஞ்சியத்தை உருவாக்குங்கள்

GitHub-இல் புதிய பொதுக் களஞ்சியத்தை உருவாக்குங்கள். தனிப்பட்ட தளத்துக்கு அதற்கு username.github.io எனப் பெயரிடுங்கள்; திட்டத் தளத்துக்கு விருப்பமான பெயர். பின்னர் அதை clone செய்து முகப்புப் பக்கத்தைச் சேருங்கள்:

git clone https://github.com/username/username.github.io.git
cd username.github.io
echo "<h1>வணக்கம், GitHub Pages</h1>" > index.html

முகப்புப் பக்கம் கட்டாயம் index.html என்று பெயரிடப்பட்டிருக்க வேண்டும் (அல்லது index.md, அல்லது README.md — அவற்றையும் GitHub முகப்புப் பக்கமாக மாற்றும்). பெரிய-சிறிய எழுத்துகள் முக்கியம்: Index.html வேலை செய்யாது.

படி 2. கோப்புகளை GitHub-க்கு அனுப்புங்கள்

git add index.html
git commit -m "தளத்தின் முதல் பக்கம்"
git push origin main

முதல் முறை அனுப்பும்போது Git பயனர்பெயரும் கடவுச்சொல்லும் கேட்டால், தனிப்பட்ட அணுகல் token அல்லது உலாவி வழி உள்நுழைவைப் பயன்படுத்துங்கள்; சாதாரண கணக்குக் கடவுச்சொல் HTTPS வழியாக git push-க்கு ஏற்காது.

படி 3. அமைப்புகளில் Pages-ஐ இயக்குங்கள்

GitHub-இல் களஞ்சியத்தைத் திறந்து Settings செல்லுங்கள்; இடப்பக்கப் பட்டியில் Pages-ஐத் தேர்ந்தெடுங்கள். Build and deployment பிரிவில் Source புலத்தில் Deploy from a branch தேர்ந்தெடுங்கள். பின்னர் கிளையை (பொதுவாக main) மற்றும் கோப்புறையை தேர்ந்தெடுங்கள்: மூலம் / (root) அல்லது /docs. Save அழுத்துங்கள்.

/docs கோப்புறை பயனுள்ளது: களஞ்சியத்தில் திட்டக் குறியீடு இருந்து, அதன் பக்கத்தில் ஆவணத் தளம் தனிக் கோப்புறையில் இருந்தால்.

படி 4. வெளியீடு முடியும் வரை காத்திருங்கள்

வெளியீடு சில வினாடிகள் முதல் சில நிமிடங்கள் வரை ஆகும்; முதல் வெளியீடு 10 நிமிடங்கள் வரை நீடிக்கலாம் என்று GitHub எச்சரிக்கிறது. Actions தாவலில் pages build and deployment செயல்முறையின் நிலையைப் பார்க்கலாம். அது பச்சை அடையாளத்துடன் முடிந்ததும், Settings → Pages-இல் தளத்தின் முகவரி தோன்றும்.

இனி எளிமை: கோப்புகளைத் திருத்துங்கள், commit செய்யுங்கள், git push செய்யுங்கள் — தளம் தானாகப் புதுப்பிக்கப்படும்.

GitHub Actions வழியாக வெளியிடுவது

கோப்புகள் களஞ்சியத்தில் ஏற்கனவே தயாராக இருந்தால், ஒரு கிளையிலிருந்து வெளியிடுவது பொருத்தம். ஆனால் தளத்தை முதலில் கட்டமைக்க வேண்டுமெனில் — உதாரணமாக Vite, React பயன்பாடு, அல்லது Hugo போன்ற generator — GitHub Actions மூலமே வசதி. Settings → Pages-இல் Source புலத்தில் GitHub Actions என்று தேர்ந்தெடுங்கள்; GitHub தயாரான workflow வார்ப்புருக்களை பரிந்துரைக்கும்.

dist கோப்புறையிலிருந்து நிலையான கோப்புகளுக்கு கட்டமைப்புக்குப் பின் எளிய workflow இப்படித் தோன்றும்:

name: Deploy to Pages
on:
  push:
    branches: [main]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist
      - id: deployment
        uses: actions/deploy-pages@v4

கோப்பு .github/workflows/pages.yml-இல் வைக்கப்படுகிறது. git push-க்குப் பின் Actions சார்புகளை நிறுவி, திட்டத்தைக் கட்டமைத்து, dist உள்ளடக்கத்தை வெளியிடுகிறது. இந்த முறையின் நன்மை: களஞ்சியத்தில் மூலக் குறியீடு மட்டுமே இருக்கும்; கட்டமைத்த கோப்புகள் commit வரலாற்றை நிரப்பாது.

திட்டத் தளங்களில் அடிக்கடி வரும் பொறி பாதைகள் (paths). தளம் /களஞ்சியப்-பெயர்/ முகவரியில் திறக்கும்; ஆனால் கட்டமைப்பான் இயல்பாக வளங்களை / மூலத்திலிருந்து குறிக்கும். அதனால் பக்கம் CSS ஸ்டைல்களும் scripts-உம் இல்லாமல் ஏற்றப்படும். தீர்வு அடிப்படைப் பாதையை அமைப்பது: Vite-இல் base: '/களஞ்சியப்-பெயர்/' விருப்பம்; பிற கட்டமைப்பான்களில் அதற்கு ஒத்த விருப்பம்.

Jekyll மற்றும் பிற நிலையான தளம் உருவாக்கிகள்

கிளையிலிருந்து வெளியிடும்போது GitHub இயல்பாக கோப்புகளை Jekyll வழியாக இயக்குகிறது; அது Ruby-இல் எழுதப்பட்ட நிலையான தளம் உருவாக்கி. எனவே பக்கங்களை Markdown-இல் எழுதலாம், வார்ப்புருக்களைப் பயன்படுத்தலாம்; GitHub அவற்றை HTML ஆக மாற்றும். வலைப்பதிவுகளுக்கும் ஆவணங்களுக்கும் இது வசதியானது: .md கோப்புகளை எழுதுங்கள், வடிவமைப்பை தீம் கவனித்துக்கொள்ளும்.

இதன் பக்க விளைவு: அடிக்கோடுடன் (underscore) தொடங்கும் பெயர் கொண்ட கோப்புகளையும் கோப்புறைகளையும் Jekyll புறக்கணிக்கும், உதாரணமாக _next அல்லது _assets. தளம் வேறு கருவியால் கட்டமைக்கப்பட்டு அத்தகைய கோப்புறைகள் தேவையானால், வேர் கோப்புறையில் வெற்றுக் கோப்பு .nojekyll ஒன்றை வையுங்கள்:

touch .nojekyll
git add .nojekyll
git commit -m "Jekyll-ஐ முடக்கு"
git push

Hugo, Astro, Eleventy, MkDocs, Docusaurus போன்ற பிற உருவாக்கிகள் GitHub Actions வழியாக வேலை செய்கின்றன: workflow-க்குள் கட்டமைத்து, விளைவாக வரும் கோப்புறையை வெளியிடுகின்றன. GitHub Pages இவற்றைப் பற்றி எதுவும் அறியாது; அதற்கு இறுதிக் கோப்புகள் மட்டும் போதும்.

GitHub Pages-உடன் சொந்த டொமைனை இணைப்பது எப்படி

username.github.io முகவரி கற்றல் திட்டங்களுக்குப் பொருந்தும்; ஆனால் போர்ட்ஃபோலியோ அல்லது திட்டத்துக்கு சொந்த டொமைன் சிறந்தது. இணைப்பு இரு பக்கங்களில் நடக்கிறது: டொமைன் வழங்குநரிடமும், களஞ்சிய அமைப்புகளிலும்.

DNS அமைப்பு

www.example.com அல்லது blog.example.com போன்ற துணை டொமைனுக்கு, username.github.io-ஐச் சுட்டும் CNAME பதிவை உருவாக்குங்கள். மூல டொமைன் example.com-க்கு GitHub Pages-இன் IP முகவரிகளைச் சுட்டும் A பதிவுகளை உருவாக்குங்கள்:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

AAAA பதிவுகளுக்கான IPv6 உட்பட தற்போதைய பட்டியல் GitHub ஆவணங்களில் உள்ளது; அமைப்பதற்கு முன் அதைச் சரிபாருங்கள். மூல டொமைனையும் www-ஐயும் இரண்டையும் அமைப்பது நல்லது: அப்போது GitHub ஒரு முகவரியிலிருந்து மற்றதற்குத் தானாக திருப்பிவிடும்.

களஞ்சியத்தில் அமைப்பு

Settings → Pages-இல் Custom domain புலத்தில் டொமைனை உள்ளிட்டுச் சேமியுங்கள். கிளையிலிருந்து வெளியிடும்போது GitHub களஞ்சியத்தில் டொமைன் பெயருடன் CNAME கோப்பை உருவாக்கும். Actions வழியாக வெளியிடும்போது CNAME கோப்பு தேவையில்லை; டொமைன் அமைப்புகளில் சேமிக்கப்படுகிறது.

கணக்கின் அமைப்புகளில் (சுயவிவர அமைப்புகளில் Pages பிரிவு) டொமைனை உறுதிப்படுத்த GitHub பரிந்துரைக்கிறது; இது, DNS GitHub-ஐச் சுட்டும் நேரத்தில் வேறொருவர் உங்கள் டொமைனை தங்கள் களஞ்சியத்தில் இணைப்பதைத் தடுக்கிறது. DNS மாற்றங்கள் ஒரு நாள் வரை பரவக்கூடும்; டொமைன் உடனே வேலை செய்யாவிட்டால் காத்திருங்கள்.

GitHub Pages-இல் HTTPS

*.github.io முகவரிகளுக்கு HTTPS எப்போதும் இயக்கத்தில் இருக்கும். உங்கள் சொந்த டொமைனுக்கு DNS சரியாக அமைந்ததும், GitHub Let's Encrypt சான்றிதழை தானாக வழங்குகிறது. அதன் பின் Settings → Pages-இல் Enforce HTTPS தேர்வு கிடைக்கும்; அதை இயக்கினால் HTTP கோரிக்கைகள் அனைத்தும் HTTPS-க்குத் திருப்பப்படும்.

தேர்வு செயலற்று இருந்தால், சான்றிதழ் இன்னும் வழங்கப்படவில்லை என்று பொருள்: DNS பதிவுகளைச் சரிபார்த்து காத்திருங்கள். சில நேரங்களில் Custom domain புலத்திலிருந்து டொமைனை நீக்கி, மீண்டும் சேர்ப்பது உதவும்; அது சான்றிதழ் வழங்கலை மீண்டும் தொடங்கும். தளம் படங்களையோ scripts-ஐயோ http:// வழியாக ஏற்றுகிறதா என்பதையும் சரிபாருங்கள்; இல்லையெனில் உலாவி அவற்றைக் கலப்பு உள்ளடக்கமாக (mixed content) தடுக்கும்.

GitHub Pages-இன் வரம்புகள்

ஹோஸ்டிங் இலவசம், ஆனால் அதற்கு எல்லைகள் உண்டு. அவை GitHub ஆவணங்களில் விவரிக்கப்பட்டுள்ளன; பெரும்பாலான தனிப்பட்ட, கற்றல் தளங்களுக்கு அவை போதுமானதை விட அதிகம்.

தொழில்நுட்ப வரம்புகளைத் தவிர பயன்பாட்டு விதிகளும் உண்டு: GitHub Pages இணையக் கடைகள், SaaS போன்ற வணிகச் சேவைகளுக்கானது அல்ல; பெரிய கோப்புகளைப் பகிரவும் அல்ல. போர்ட்ஃபோலியோ, ஆவணங்கள், வலைப்பதிவு, திட்ட landing பக்கம் ஆகியவற்றுக்கு இது சரியானது.

இன்னொரு வரம்பு: சேவையக அமைப்புகள் இல்லை. சொந்தத் திருப்பங்கள், பதில் தலைப்புகள் (headers), .htaccess போன்ற விதிகள் இங்கு கிடையாது. வேர் கோப்புறையில் சொந்த 404.html பக்கத்தை வைக்கலாம்; இல்லாத முகவரிகளுக்கு GitHub அதைக் காட்டும்.

பொதுவான சிக்கல்களும் தீர்வுகளும்

GitHub Pages-இல் 404 பிழை

மிகவும் பொதுவான காரணம்: நீங்கள் மூலமாகத் தேர்ந்தெடுத்த கோப்புறையில் index.html இல்லை. சரியான கிளையையும் கோப்புறையையும் (/ (root) அல்லது /docs) தேர்ந்தெடுத்துள்ளீர்களா, கோப்பு index.html என்று சிறிய எழுத்துகளில் உள்ளதா என்று பாருங்கள். இரண்டாவது காரணம்: தளம் இன்னும் வெளியிடப்படவில்லை — Actions தாவலைத் திறந்து கட்டமைப்பு முடியும் வரை காத்திருங்கள்.

ஒற்றைப் பக்கப் பயன்பாட்டின் உள் பக்கங்களில் பக்கத்தைப் புதுப்பிக்கும்போது 404 வந்தால், அது வழிச்செலுத்தல் (routing) பிரச்சினை: /about கோப்பு இல்லாததால் சேவையகத்துக்கு அந்த முகவரி தெரியாது. மாற்று வழிகள்: hash வழிச்செலுத்தல் (/#/about), அல்லது index.html-இன் நகலை 404.html என்ற பெயரில் வைப்பது.

தளம் புதுப்பிக்கப்படவில்லை

முதலில் மாற்றங்கள் GitHub-ஐ உண்மையில் சென்றடைந்தனவா என்று பாருங்கள்: git status மற்றும் git log origin/main --oneline -3. பின்னர் Actions தாவலைத் திறக்கவும்: கட்டமைப்பு தோல்வியடைந்திருந்தால் சிவப்புக் குறியும், பிழையை விளக்கும் பதிவும் இருக்கும்; உதாரணமாக Jekyll கோப்பில் தவறான தொடரியல் அல்லது workflow-இல் பிழை.

கட்டமைப்பு வெற்றியடைந்தும் உலாவியில் பழைய பதிப்பு தெரிந்தால், காரணம் cache. GitHub Pages கோப்புகளை சில நிமிடங்கள் தற்காலிகமாக சேமிக்கும்; உலாவியும் சேமிக்கும். கேச் அழித்துப் பக்கத்தைப் புதுப்பிக்கவும் (Ctrl+F5 அல்லது Cmd+Shift+R), அல்லது தனிப்பட்ட சாளரத்தில் திறக்கவும்.

CSS ஸ்டைல்களும் படங்களும் ஏற்றப்படவில்லை

பெரும்பாலும் பாதைகள் தவறானவை. திட்டத் தளத்தில் /style.css இணைப்பு username.github.io-இன் மூலத்தைக் குறிக்கும்; களஞ்சியக் கோப்புறையை அல்ல. உறவுப் பாதைகளைப் (style.css, ./img/logo.png) பயன்படுத்துங்கள், அல்லது கட்டமைப்பானில் அடிப்படைப் பாதையை அமையுங்கள். பெயர்களில் எழுத்துநிலையைச் (case) சரிபாருங்கள்: GitHub சேவையகங்கள் Logo.PNG மற்றும் logo.png-ஐ வேறுபடுத்தும், Windows-இல் உள்ளூரில் வேலை செய்திருந்தாலும்.

அடிக்கோடுடன் தொடங்கும் கோப்புறைகள் மறைந்துவிட்டன

இது Jekyll-இன் வேலை: _app போன்ற கோப்புறைகளை அது வெளியிடாது. வேர் கோப்புறையில் .nojekyll கோப்பைச் சேருங்கள், அல்லது GitHub Actions வழியாக வெளியிடுவதற்கு மாறுங்கள்.

சுருக்கம்

நிலையான தளத்தை இலவசமாக வெளியிட GitHub Pages மிக வேகமான வழி: ஒரு களஞ்சியம், ஒரு index.html கோப்பு, Settings → Pages-இல் ஒரு மூலம் — சில நிமிடங்களில் தளம் username.github.io-இல் திறக்கும். கட்டமைக்க வேண்டிய தளங்களுக்கு GitHub Actions-ஐப் பயன்படுத்துங்கள்; சொந்த டொமைனுக்கு DNS பதிவுகளும் Enforce HTTPS தேர்வும். சேவையின் எல்லைகளை நினைவில் வையுங்கள்: நிலையான உள்ளடக்கம் மட்டும், சேவையகக் குறியீடு இல்லை, அளவு மற்றும் போக்குவரத்துக்கு வரம்புகள் உண்டு. GitHub உடன் வேலை செய்தல், மாற்றங்களை அனுப்புதல், தானியக்கம் ஆகியவை Git பாடநெறியில் நடைமுறையில் விளக்கப்பட்டுள்ளன.