Φτιάξε την προσωπική σου σελίδα δωρέαν σε 5 λεπτά | Με Github Pages + Pelican

Άρθρα και οδηγοί
1

Table of Contents

  1. About
  2. Requirements
  3. Installing Pelican
  4. Creating your site
  5. Theming
  6. Pelican configuration
  7. Github pages

About

Είναι σημαντικό να έχουμε μια online παρουσία σήμερα, αλλά δυστυχώς πολλές απο τις σημερινές πλατφόρμες περιορίζουν τον τρόπο που εκφράζουμε τον χαρακτήρα μας.

Ένας εύκολος τρόπος να εκφράσεις την δημιουργικότατα σου online με εύκολο τρόπο είναι μέσω μιας προσωπικής σελίδας, όπου μπορείς να μοιραστείς τα ενδιαφέροντα σου αλλά και μέσα από αυτό το process να αποκτήσεις βασικές τεχνικές γνώσεις.

Ο πιο εύκολος τρόπος που έχω βρει και θα δείξω εδώ είναι μέσω Github Pages χρησιμοποιώντας Pelican

Για να φτιάξεις την σελίδα αλλά και για να την κάνεις host στο github είναι δωρέαν, δεν έχεις να χάσεις κάτι:)

Το παράδειγμα που θα χτίσουμε είναι βασισμένο στην σελίδα μου εδώ thanosapollo.com

Requirements

Installing Pelican

Μπορείς να κατεβάσεις pelican χρησιμοποιώντας το package manager απο την διανομή σου, όπως:

guix install pelican #in GuixSD

sudo apt install pelican #in Debian based distros

Άμα για κάποιο λόγο έχεις προβλήματα με το package manager, είναι διαθέσιμο μέσω pip

pip install pelican # or pip3

Creating your site

Υποθέτω ότι θες χτίσεις την σελίδα σου στο ~/Developer/my-site
Εδώ φτιάχνουμε το directory που θέλουμε να έχουμε την σελίδα και ξεκινάμε το pelican-project

# Move to your desired path to create your site
cd ~/Developer
# create your sites directory
mkdir my-site
# run pelican-quickstart inside your site's directory
cd my-site
pelican-quickstart

Απάντησε τις ερωτήσεις που θα σου βγάλει με τα defaults, θα τα αλλάξουμε σε λίγο όλα

Παρατήρησε την κατάταξη του προτζεκτ σου, θα φτιάξουμε το περιέχομενο της σελίδας στο content
φάκελο

Ας δοκιμάσουμε την σελίδα μας
Μέσα στο content φτιάχνουμε ένα file με όνομα test.md και βάζουμε τα παρακάτω

 Title: An Amazing Title
Date: 2022-02-23
Summary: The summary of this amazing Article
Category: Amazing
Tags: blogs, coding

  # This is a test 

  testing this site

Για να δεις την σελίδα σου τρέξε την παρακάτω εντολή:

# Make sure you are at ~/Developer/my-site and not inside /content
cd ~/Developer/my-site

pelican -r -l

Άνοιξε browser και μπες στο localhost:8000 για να δεις την σελίδα σου

Theming

Είμαστε σχεδόν έτοιμοι! Παρόλα αυτά, ίσως θες να βάλεις διαφορετικό theme και να μην κρατήσεις το default
Ευτυχώς το pelican έχει όλα τα themes εδώ: pelican-themes
Για τώρα όμως θα χρησιμοποιήσουμε το Flex theme

# Install Flex-theme
git clone https://github.com/alexandrevicenzi/Flex ~/Developer/my-site/themes/Flex

Pelican configuration

Αλλάζουμε τις ρυθμίσεις του Pelican για την σελίδα μας, διαγράφουμε ότι έχει μέσα το pelicanconf.py και απλά βάζουμε το παρακάτω και το αλλάζουμε με τα στοιχεία μας.

import datetime  # import datetime to setup copyright year

AUTHOR = 'Your Name'
SITEURL = "https://<username>.github.io"
SITENAME = 'My site\'s name'
SITETITLE = "My site's title"
SITESUBTITLE = "Amazing human"
SITEDESCRIPTION = "My site's description"
# SITELOGO = ''
# FAVICON = '' You can add your favicon path here
BROWSER_COLOR = "#333333"
PYGMENTS_STYLE = "monokai"

PATH = 'content'

TIMEZONE = 'Europe/Athens'  # Change this to your current TIMEZONE

DEFAULT_LANG = 'en'

OUTPUT_PATH = "output"  # you can change that to public
# Feed generation is usually not desired when developing

FEED_DOMAIN = "<username>.github.io/output"

FEED_ALL_ATOM = 'feed.xml'
FEED_MAX_ITEMS = 100
CATEGORY_FEED_ATOM = None
TRANSLATION_FEED_ATOM = None
AUTHOR_FEED_ATOM = None
AUTHOR_FEED_RSS = None


PYGMENTS_STYLE_DARK = 'monokai'

# Theme customization


EXTRA_PATH_METADATA = {'favicon': {'path':
				   'public/favicon.ico'}}

current = datetime.datetime.now()  # Automate to display current year
# Flex Theme Settings
THEME = "themes/Flex"
THEME_COLOR = 'dark'
PYGMENTS_STYLE = 'emacs'
COPYRIGHT_YEAR = current.year
COPYRIGHT_NAME = "My Name"
I18N_TEMPLATES_LANG = "en"
DEFAULT_LANG = "en"
OG_LOCALE = "en_US"
LOCALE = "en_US"
SITELOGO = "Link to your github avatar logo"

THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE = True
THEME_COLOR_ENABLE_USER_OVERRIDE = True

USE_LESS = True

GITHUB_CORNER_URL = "Link to your repository at Github"

USE_FOLDER_AS_CATEGORY = False
MAIN_MENU = True
HOME_HIDE_TAGS = False


MENUITEMS = (
    ("Tags", "<your-name>.github.io/public/tags.html"),
    ("Categories", "<your-name>.github.io/public/categories.html"),
)

# AUTHOR
AUTHOR_INTRO = 'Your intro'
AUTHOR_WEB = '<website-link>'

# Social widget
SOCIAL = (
    ('github', 'your-githb-account'),
    ('rss', "<your-site-url>/feed.xml"),
    ("envelope", "mailto:<your-email>"),
    ("telegram", '<your-telegram-link>',)
)

MARKDOWN = {
    'extensions': [
	# official extensions
	'markdown.extensions.extra', # include extensions: abbr, attr_list, def_list, fenced_code, footnotes, tables
	'markdown.extensions.codehilite', # to generate code color scheme using pygments
	'markdown.extensions.meta', # to parse key:value pairs at the begining of file
	'markdown.extensions.sane_lists',# for better list 
	'markdown.extensions.toc', # add Table of Content
	'markdown.extensions.nl2br', # easily to add new line, but make attr_list and legacy_attrs hard to control
	'markdown.extensions.admonition', # to make  alert box
	'markdown.extensions.legacy_attrs', # insert attribs into element, but markdown already has a built-in function that do the same thing
	'markdown.extensions.legacy_em', # to use legacy emphasis
    ],
    'extension_configs': {
	'markdown.extensions.codehilite': {'css_class': 'highlight'},
    },
    'output_format': 'html5',
}

DEFAULT_PAGINATION = 10

RELATIVE_URLS = True

Δοκίμασε ξάνα να τρέξεις pelican -r -l να δεις άμα όλα είναι όπως σου αρέσουν

Github pages

Για να φτιάξεις GitHub Pages σελίδα κάνε τα παρακάτω:

  • Μπες στο λογαριασμό σου στο Github
  • Πατας το εικονίδιο “+” στην πάνω δεξιά γωνία και διαλέγεις “New repository”
  • Για ονόμα βάζουμε username.github.io, άλλαξε το username με το δικό σου username
  • Διάλεξε public opiton

Επίσης θα χρειαστεί να έχεις ssh key για τον λογαριασμό σου, ακολούθησε τα βήματα εδώ εδώ,

Μόλις φτιάξεις τα κλειδιά σου πρόσθεσε τα στον λογαριασμό σου, αυτό θα σου επιτρέψει να έχεις πρόσβαση στο repo με ασφάλεια

Για να ανεβάζεις την σελίδα σου ως GitHub Page, τρέξε τα παρακάτω:

# Init your website
git init
# Add everything
git add .

git commit -m "Init project"

git remote add origin git@github.com:<your-repo>.git

git push -u origin master

Για να ενεργοποιήσεις το Github Pages, κάνε τα παρακάτω:

  • Πήγαινε στο repository που φτιάξαμε, και πάτα “Settings”
  • Στο μενού διάλεξε “Pages”
  • Για “Source” Διάλεξε “master branch”
  • Κάνε “τικ” την επιλογή για HTTPS
  • πάτα save

Το github τώρα θα χτίσει την σελίδα σου, και θα μπορείς να την δεις στο https://your-user-name.github.io

Σημείωση

άμα η σελίδα σου είναι διαθέσιμη στο https://username.github.io/output μόνο, απλα πρόσθεσε στο ~/Developer/my-site/ ένα html file index.html με αυτό το περιεχόμενο:

<meta http-equiv="refresh" content="0; url=https://<user-name>.github.io/output/" />
8 «Μου αρέσει»