Skip to content

Commit

Permalink
primer post y aorganizacion
Browse files Browse the repository at this point in the history
  • Loading branch information
Capi-nemoo committed Sep 12, 2024
1 parent 90c0715 commit ba66903
Show file tree
Hide file tree
Showing 20 changed files with 938 additions and 15 deletions.
21 changes: 21 additions & 0 deletions :q
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"
61 changes: 61 additions & 0 deletions content/en/Your-Own-Website-or-Blog-Using-Hugo.md
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.
63 changes: 63 additions & 0 deletions content/es/Tu-Propia-Web-o-Blog-con-Hugo.md
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.
31 changes: 31 additions & 0 deletions content/posts/mi-primer-post.md
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)

24 changes: 16 additions & 8 deletions data/menu.toml
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,6 @@ title = "me"
[[entries.entries]]
title = "Texas Tech University"

[[entries.entries.entries]]
title = "freshman"

[[entries.entries.entries]]
title = "computer engineering"

Expand All @@ -29,7 +26,7 @@ title = "me"

[[entries.entries.entries]]
title = "email"
url = "icloud.work@icloud.com"
url = "mailto:icloud.work@icloud.com"

[[entries.entries.entries]]
title = "youtube"
Expand Down Expand Up @@ -58,12 +55,23 @@ title = "me"
title = "TerminalShare"
url = "../"


[[entries]]
title = "all posts"
title = "all posts"

[entries.post_list]
[[entries.entries]]
title = "English posts"
[entries.entries.post_list]
limit = 5
section = "en"
show_more = true
show_more_text = "See more posts..."
show_more_url = "posts"

[[entries.entries]]
title = "espanolo posts"

[entries.entries.post_list]
section = "es"
show_more = true
show_more_text = "See archive..."
show_more_text = "See more posts..."
show_more_url = "posts"
2 changes: 1 addition & 1 deletion public/css/main.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 44 additions & 0 deletions public/en/index.html
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&amp;v=2&amp;port=1313&amp;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>
19 changes: 19 additions & 0 deletions public/en/index.xml
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>&lt;p&gt;&lt;em&gt;Disclaimer&lt;/em&gt;: Guide for Unix-based system users only. -Windows users, no thanks.&lt;/p&gt;&#xA;&lt;h1 id=&#34;hey-buddy&#34;&gt;Hey buddy,&lt;/h1&gt;&#xA;&lt;p&gt;This is a quick guide on how to create your own website/blog. It&amp;rsquo;s aimed at intermediate users, so I won&amp;rsquo;t be explaining anything in detail.&lt;/p&gt;&#xA;&lt;h3 id=&#34;1-hugo&#34;&gt;1. Hugo&lt;/h3&gt;&#xA;&lt;p&gt;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!!! 🚀&lt;/p&gt;</description>
</item>
</channel>
</rss>
82 changes: 82 additions & 0 deletions public/en/your-own-website-or-blog-using-hugo/index.html
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&amp;v=2&amp;port=1313&amp;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&rsquo;s aimed at intermediate users, so I won&rsquo;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&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>
<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&rsquo;re up for it, you can create your own! (I&rsquo;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&rsquo;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, &ldquo;use GitHub Pages,&rdquo; and that&rsquo;s it. So, here&rsquo;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&rsquo;s Settings and click on Pages.</li>
<li>Select the root folder and branch.</li>
<li>Add your custom domain.</li>
<li>And we&rsquo;re done! Now, go to Actions in your repo, select &ldquo;New workflow,&rdquo; search for Hugo, and that&rsquo;s it—you&rsquo;ve got your new website up and running.</li>
</ol>

</article>

</div>
</main>
</body>
</html>
Loading

0 comments on commit ba66903

Please sign in to comment.