-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
90c0715
commit ba66903
Showing
20 changed files
with
938 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
# theme.toml template for a Hugo theme | ||
# See https://github.com/gohugoio/hugoThemes#themetoml for an example | ||
|
||
name = "no-style-please" | ||
license = "MIT" | ||
licenselink = "https://github.com/Masellum/hugo-theme-nostyleplease/blob/main/LICENSE" | ||
description = "a (nearly) no-CSS, fast, minimalist Hugo theme ported from riggraz/no-style-please." | ||
homepage = "https://github.com/Masellum/hugo-theme-nostyleplease" | ||
tags = ["blog", "minimalist"] | ||
features = [] | ||
min_version = "0.41.0" | ||
|
||
[author] | ||
name = "Masellum" | ||
homepage = "Masellum.github.io" | ||
|
||
# If porting an existing theme | ||
[original] | ||
name = "riggraz" | ||
homepage = "https://riggraz.dev/" | ||
repo = "https://github.com/riggraz/no-style-please" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
--- | ||
title: "Your Own Website or Blog Using Hugo Engl" | ||
date: 2024-09-12T14:14:13-05:00 | ||
draft: false | ||
hidden: true | ||
--- | ||
|
||
*Disclaimer*: Guide for Unix-based system users only. -Windows users, no thanks. | ||
|
||
# Hey buddy, | ||
|
||
This is a quick guide on how to create your own website/blog. It's aimed at intermediate users, so I won't be explaining anything in detail. | ||
|
||
### 1. Hugo | ||
|
||
Hugo is fast, lightweight, and perfect for building websites with minimal resources. I chose it for its speed and flexibility for personal projects and portfolios. The biggest advantage I see, and what I love the most, is that you can create your own markdown templates!!! 🚀 | ||
|
||
### 2. Installation in ~2 Minutes | ||
|
||
Installing Hugo is easy. Just run one of these commands depending on your system: | ||
|
||
```bash | ||
brew install hugo # For macOS | ||
sudo apt install hugo # For Linux | ||
sudo pacman -S hugo # For Linux++ | ||
``` | ||
|
||
### 3. Create Your Website in 1 Command | ||
|
||
Start your project with this command: | ||
|
||
```bash | ||
hugo new site my-website # This creates a folder (no need to put it inside another folder) | ||
``` | ||
|
||
### 4. Choose a Theme and Customize It | ||
|
||
Pick a theme from Hugo Themes: | ||
|
||
```bash | ||
git clone URL-THEME themes/ ## Copy it into the themes folder | ||
``` | ||
|
||
Go to Hugo Themes, select a theme, or if you're up for it, you can create your own! (I'll leave my personal recommendations at the end of the post). Customize the `config.toml` file to adjust colors, fonts, and more. | ||
|
||
If you run into trouble or you're not a web developer, the only thing you need to know is: | ||
|
||
- Posts go in `content/data`, | ||
- Main configuration goes in `config.toml` (root directory). | ||
|
||
### 6. Deploy Easily with Netlify or GitHub Pages | ||
|
||
This part was the trickiest for me 😅. Nobody really explains how to do it properly; they just say, "use GitHub Pages," and that's it. So, here's my detailed tutorial: | ||
|
||
1. Buy a domain on Cloudflare (optional, but recommended). | ||
2. Go to GitHub and verify the domain in the Pages section under Settings. | ||
3. Upload the whole folder you created with Hugo to your repo on GitHub. | ||
4. Then, go to the repo's Settings and click on Pages. | ||
5. Select the root folder and branch. | ||
6. Add your custom domain. | ||
7. And we're done! Now, go to Actions in your repo, select "New workflow," search for Hugo, and that's it—you've got your new website up and running. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
--- | ||
title: "Your Own Website or Blog Using Hugo" | ||
date: 2024-09-12T14:05:45-05:00 | ||
draft: false | ||
--- | ||
|
||
*Disclaimer* : Guía para usuarios de Unix-based-systems. | ||
|
||
[English](../posts/Your-Own-Website-or-Blog-Using-Hugo-engl.md) | ||
|
||
# Hola amigazo | ||
|
||
Esto es una guía rápida de cómo hacer tu propio website/blog. Está enfocada para usuarios medianamente avanzados, así que realmente no explicaré nada en detalle. | ||
|
||
## 1. Hugo | ||
|
||
Hugo es rápido, ligero y perfecto para crear websites con pocos recursos. Lo elegí por su velocidad y flexibilidad para proyectos personales y portafolios. La mayor ventaja que le veo, y lo que más me gusta, es que puedes hacer tu propio template de markdown!!! 🚀 | ||
|
||
## 2. Instalación en ~2 Minutos | ||
|
||
Instalar Hugo es sencillo. Solo tienes que ejecutar uno de estos comandos dependiendo de tu sistema: | ||
|
||
```bash | ||
brew install hugo # Para macOS | ||
sudo apt install hugo # Para Linux | ||
sudo pacman -S hugo # Para Linux++ | ||
``` | ||
|
||
## 3. Crea tu Website en 1 Comando | ||
|
||
Inicia tu proyecto con este comando: | ||
|
||
```bash | ||
hugo new site mi-website # Esto crea una carpeta (no hace falta ponerlo dentro de otra carpeta) | ||
|
||
``` | ||
|
||
## 4. Elige un Tema y Personalízalo | ||
|
||
Escoge un tema desde Hugo Themes: | ||
|
||
```bash | ||
git clone URL-TEMA themes/ ## copialo dentro de la carpeta themes | ||
``` | ||
|
||
Ve a Hugo Themes, selecciona un tema, o si te animas, ¡puedes crear el tuyo propio! (al final del post te dejo mis recomendaciones personales). Personaliza el archivo `config.toml` para ajustar colores, fuentes y más. | ||
|
||
Si tienes problemas o no eres web developer, lo único que tienes que saber es que: | ||
|
||
- En `content/data` van los posts, | ||
- En `config.toml` (directorio root) va la configuración principal del website. | ||
|
||
## 5. Despliega Fácil con Netlify o GitHub Pages | ||
|
||
Esta parte fue la más complicada para mí 😅. Nadie te explica cómo hacerlo bien, solo te dicen "usa GitHub Pages" y listo. Así que aquí va mi tutorial detallado: | ||
|
||
1. Compra un dominio en Cloudflare (opcional, pero recomendado). | ||
2. Ve a Git y verifica el dominio en la sección de Pages dentro de Settings. | ||
3. Sube toda la carpeta que creaste con Hugo a tu repo en GitHub. | ||
4. Luego, ve a Settings del repo y cliquea Pages. | ||
5. Selecciona carpeta root y branch. | ||
6. Agrega tu custom domain. | ||
7. ¡Y ya terminamos! Ahora ve a Actions en tu repo, selecciona New workflow, busca Hugo, y listo, tienes tu nuevo website funcionando. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
--- | ||
title: "Mi Primer Post" | ||
date: 2024-09-12T12:33:18-05:00 | ||
draft: true | ||
--- | ||
|
||
# Esta es Una prueba | ||
|
||
Es para saber si typora se puede usar como editor principal para paginas de markdown con hugo (framework para hacer websites estaticos) | ||
|
||
### Esto es un titulo ###. | ||
|
||
## otro ##. | ||
|
||
# Que tal una lista? .# | ||
|
||
- hola | ||
- como | ||
- estas | ||
- tu | ||
|
||
###### enumerada #######. | ||
|
||
1. que | ||
2. vas | ||
3. a | ||
4. hacer | ||
5. hoy | ||
|
||
vinculo: [cmamo](xdxddxdxdx) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"><head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> | ||
<meta charset="utf-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
|
||
|
||
<title> | ||
|
||
Ens | ||
|
||
</title> | ||
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="/" /> | ||
|
||
|
||
|
||
<link rel="stylesheet" href="//localhost:1313/css/main.01273a70fa873b012d056499c16bb47955e0e7526c34edb73f05ca8f99f488ebc323423c6557f93f9b42a41de0448a25ce9a1ab577d0bf61e36eaf52a4979a1d.css" integrity="sha512-ASc6cPqHOwEtBWSZwWu0eVXg51JsNO23PwXKj5n0iOvDI0I8ZVf5P5tCpB3gRIolzpoatXfQv2Hjbq9SpJeaHQ==" /> | ||
|
||
</head> | ||
<body a="auto"> | ||
<main class="page-content" aria-label="Content"> | ||
<div class="w"> | ||
<a href="/">..</a> | ||
|
||
|
||
<h1>Ens</h1> | ||
|
||
|
||
|
||
<ul><li> | ||
<span>2024-09-12</span> | ||
<a href="//localhost:1313/en/your-own-website-or-blog-using-hugo/">Your Own Website or Blog Using Hugo Engl</a> | ||
</li> | ||
|
||
</ul> | ||
|
||
|
||
|
||
</div> | ||
</main> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<?xml version="1.0" encoding="utf-8" standalone="yes"?> | ||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> | ||
<channel> | ||
<title>Ens on </title> | ||
<link>//localhost:1313/en/</link> | ||
<description>Recent content in Ens on </description> | ||
<generator>Hugo</generator> | ||
<language>en</language> | ||
<lastBuildDate>Thu, 12 Sep 2024 14:14:13 -0500</lastBuildDate> | ||
<atom:link href="//localhost:1313/en/index.xml" rel="self" type="application/rss+xml" /> | ||
<item> | ||
<title>Your Own Website or Blog Using Hugo Engl</title> | ||
<link>//localhost:1313/en/your-own-website-or-blog-using-hugo/</link> | ||
<pubDate>Thu, 12 Sep 2024 14:14:13 -0500</pubDate> | ||
<guid>//localhost:1313/en/your-own-website-or-blog-using-hugo/</guid> | ||
<description><p><em>Disclaimer</em>: Guide for Unix-based system users only. -Windows users, no thanks.</p>
<h1 id="hey-buddy">Hey buddy,</h1>
<p>This is a quick guide on how to create your own website/blog. It&rsquo;s aimed at intermediate users, so I won&rsquo;t be explaining anything in detail.</p>
<h3 id="1-hugo">1. Hugo</h3>
<p>Hugo is fast, lightweight, and perfect for building websites with minimal resources. I chose it for its speed and flexibility for personal projects and portfolios. The biggest advantage I see, and what I love the most, is that you can create your own markdown templates!!! 🚀</p></description> | ||
</item> | ||
</channel> | ||
</rss> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"><head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> | ||
<meta charset="utf-8" /> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<meta name="description" content="Disclaimer: Guide for Unix-based system users only. -Windows users, no thanks. | ||
Hey buddy, | ||
This is a quick guide on how to create your own website/blog. It’s aimed at intermediate users, so I won’t be explaining anything in detail. | ||
1. Hugo | ||
Hugo is fast, lightweight, and perfect for building websites with minimal resources. I chose it for its speed and flexibility for personal projects and portfolios. The biggest advantage I see, and what I love the most, is that you can create your own markdown templates!!! 🚀"> | ||
|
||
<title> | ||
|
||
Your Own Website or Blog Using Hugo Engl | ||
|
||
</title> | ||
|
||
|
||
<link rel="shortcut icon" type="image/x-icon" href="/" /> | ||
|
||
|
||
|
||
<link rel="stylesheet" href="//localhost:1313/css/main.01273a70fa873b012d056499c16bb47955e0e7526c34edb73f05ca8f99f488ebc323423c6557f93f9b42a41de0448a25ce9a1ab577d0bf61e36eaf52a4979a1d.css" integrity="sha512-ASc6cPqHOwEtBWSZwWu0eVXg51JsNO23PwXKj5n0iOvDI0I8ZVf5P5tCpB3gRIolzpoatXfQv2Hjbq9SpJeaHQ==" /> | ||
|
||
</head> | ||
<body a="auto"> | ||
<main class="page-content" aria-label="Content"> | ||
<div class="w"> | ||
<a href="/">..</a> | ||
|
||
|
||
<article> | ||
<p class="post-meta"> | ||
<time datetime="2024-09-12 14:14:13 -0500 CDT"> | ||
2024-09-12 | ||
</time> | ||
</p> | ||
|
||
<h1>Your Own Website or Blog Using Hugo Engl</h1> | ||
|
||
|
||
|
||
<p><em>Disclaimer</em>: Guide for Unix-based system users only. -Windows users, no thanks.</p> | ||
<h1 id="hey-buddy">Hey buddy,</h1> | ||
<p>This is a quick guide on how to create your own website/blog. It’s aimed at intermediate users, so I won’t be explaining anything in detail.</p> | ||
<h3 id="1-hugo">1. Hugo</h3> | ||
<p>Hugo is fast, lightweight, and perfect for building websites with minimal resources. I chose it for its speed and flexibility for personal projects and portfolios. The biggest advantage I see, and what I love the most, is that you can create your own markdown templates!!! 🚀</p> | ||
<h3 id="2-installation-in-2-minutes">2. Installation in ~2 Minutes</h3> | ||
<p>Installing Hugo is easy. Just run one of these commands depending on your system:</p> | ||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>brew install hugo <span style="color:#0f0"># For macOS</span> | ||
</span></span><span style="display:flex;"><span>sudo apt install hugo <span style="color:#0f0"># For Linux</span> | ||
</span></span><span style="display:flex;"><span>sudo pacman -S hugo <span style="color:#0f0"># For Linux++</span> | ||
</span></span></code></pre></div><h3 id="3-create-your-website-in-1-command">3. Create Your Website in 1 Command</h3> | ||
<p>Start your project with this command:</p> | ||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hugo new site my-website <span style="color:#0f0"># This creates a folder (no need to put it inside another folder)</span> | ||
</span></span></code></pre></div><h3 id="4-choose-a-theme-and-customize-it">4. Choose a Theme and Customize It</h3> | ||
<p>Pick a theme from Hugo Themes:</p> | ||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>git clone URL-THEME themes/ <span style="color:#0f0">## Copy it into the themes folder</span> | ||
</span></span></code></pre></div><p>Go to Hugo Themes, select a theme, or if you’re up for it, you can create your own! (I’ll leave my personal recommendations at the end of the post). Customize the <code>config.toml</code> file to adjust colors, fonts, and more.</p> | ||
<p>If you run into trouble or you’re not a web developer, the only thing you need to know is:</p> | ||
<ul> | ||
<li>Posts go in <code>content/data</code>,</li> | ||
<li>Main configuration goes in <code>config.toml</code> (root directory).</li> | ||
</ul> | ||
<h3 id="6-deploy-easily-with-netlify-or-github-pages">6. Deploy Easily with Netlify or GitHub Pages</h3> | ||
<p>This part was the trickiest for me 😅. Nobody really explains how to do it properly; they just say, “use GitHub Pages,” and that’s it. So, here’s my detailed tutorial:</p> | ||
<ol> | ||
<li>Buy a domain on Cloudflare (optional, but recommended).</li> | ||
<li>Go to GitHub and verify the domain in the Pages section under Settings.</li> | ||
<li>Upload the whole folder you created with Hugo to your repo on GitHub.</li> | ||
<li>Then, go to the repo’s Settings and click on Pages.</li> | ||
<li>Select the root folder and branch.</li> | ||
<li>Add your custom domain.</li> | ||
<li>And we’re done! Now, go to Actions in your repo, select “New workflow,” search for Hugo, and that’s it—you’ve got your new website up and running.</li> | ||
</ol> | ||
|
||
</article> | ||
|
||
</div> | ||
</main> | ||
</body> | ||
</html> |
Oops, something went wrong.