DEV Community: Jorge Ruvalcaba

Setting up Namecheap domain in Vercel

Jorge Ruvalcaba — Sun, 21 Mar 2021 00:00:00 +0000

Last week I was working on setting up this blog, and I decided to migrate the app from Netlify to Vercel. Vercel provides a nice-looking UI to manage everything related to our web apps and makes really easy to set a custom domain rather than the default app-random.vercel.app that is automatically assigned to each project.

Adding a domain is something I've done several times in the past, yet every time I seem to have to look around on how to do it. So I decided to document the process of adding a Namecheap domain to Vercel in the hopes that it helps others that are trying to do the same.

Vercel setup

Selecting Your Project

On the dashboard, select the project to which you would like to assign your domain.

Go to Settings and select Domains menu item.

2. Entering Your Domain

From the Domains page, enter the domain you want to add.

Once you added a valid domain, you will see (most of the times) the domain added below with an ugly Invalid Configuration error. This is due to we still need to set up Namecheap to point Vercel's Nameservers.

You will also see a tab named Nameservers. Click on it and you'll see the nameservers we will need to add to our domain in Namecheap.

Namecheap Setup

Once that our domain is added in Vercel, we just need to add the nameservers in Namecheap in order to finish the setup.

Once you are logged into your Namecheap account, go to Domain List on the sidebar, select the domain you want to configure, and click on Manage.

Now find the NAMESERVERS section, click on the dropdown and select Custom DNS. This will reveal an input where you can input the Vercel's Nameserver addresses. Once you added the nameservers, click on the green checkmark at the right and you are done! 😄

Hope this guide was useful for you! Let me know in the comments if you have any questions.

If this post helped you, please consider following my journey on Twitter

Add tab to search in your Gatsby blog

Jorge Ruvalcaba — Sun, 16 Aug 2020 00:00:00 +0000

You can go to the blog main page of my blog to see the demo

This is a cool trick that I just learned about today that can help the UX of your blog.

There’s a cool Chromium browser feature called Tab to Search, which lets you quickly search a site via a Chromium address bar (aka the Omnibox).

Here are the three quick steps to add it to your search-enabled Gatsby blog:

Create a file named opensearch.xml in your static directory (src/static/opensearch.xml) and add the following:

<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>[Your Blog's Name]</ShortName>
  <Description>[Your Blog's Description]</Description>
  <Url type="text/html" method="get" template="https://[your-url]/blog/?search={searchTerms}"/>
</OpenSearchDescription>

Make sure to add your preferred <ShortName> and <Description> text content. The <Url> template is the URL where the search is taking place. In our case, it’s /blog/?search={searchTerms}, with {searchTerms} being the string the user types into the Omnibox. These tags are required for Chromium to add your site to the list of searchable sites and automatically enable this feature.

Copy the default html.js file to your Gatsby site so we can modify the default HTML Gatsby file.

cp .cache/default-html.js src/html.js

In your newly created src/html.js file, add the following <link> tag:

<link
  type="application/opensearchdescription+xml"
  rel="search"
  href="opensearch.xml"
/>

And that's it! With this change in place, you’ll have this neat feature up and running in your blog 😎!

Nuevo blog

Jorge Ruvalcaba — Sat, 15 Aug 2020 16:28:37 +0000

Hola a todos! Bienvenidos a esta: su casa. Su guarida donde podrán esconderse de la ignorancia del web. Esta sociedad secreta de los chicos cool que les gustan los java y los scripts.

Mi nombre es Jorge y actualmente soy software engineer en una startup muy cool llamada Scalable Press.

Planeo hablar en este humilde espacio de (si, lo adivinaron) JavaScript, pero además de cosas que me han interesado y que creo que a ustedes también podrán interesarles. Una de las primeras preguntas que me hice en el momento de organizar todo este blog o página personal fue si debería hacer el contenido en inglés o en español. Cuando estaba empezando en esta bonita aventura llamada desarrollo web, me sorprendió la gran cantidad de contenido tan bueno y tan diverso de tecnología que existe.

Lamentablemente existe una brecha increíble que hace que ese contenido sea accesible para toda LATAM (latinoamérica, si es que eres de esta brecha que menciono) solo para las personas que saben inglés o por lo menos lo entienden. Por lo tanto, algo de este contenido será en español, mientras no se me ocurra otra cosa (como aprender ingles).

Acompañenme entonces, querido público lector, en este viaje por el maravilloso mundo de JavaScript. Si tienen alguna pregunta que me quieran hacer pueden mandarme un tweet, saludos cordiales.