ਇੱਕ ਕੰਮਕਾਜੀ ਡਿਜ਼ਾਈਨਰ ਲਈ, ਪੋਰਟਫੋਲੀਓ ਸਾਈਟ ਇੱਕ ਅਜੀਬ ਵਿਚਕਾਰਲੀ ਸਥਿਤੀ ਵਿੱਚ ਹੁੰਦੀ ਹੈ। ਇਸਨੂੰ ਸ਼ਾਰਪ ਦਿਖਣਾ ਚਾਹੀਦਾ ਹੈ, ਤੁਰੰਤ ਲੋਡ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਬਿੱਲੇਯੂਏਬਲ ਘੰਟਿਆਂ (billable hours) ਨੂੰ ਖਰਾਬ ਕੀਤੇ ਬਿਨਾਂ ਅੱਪ-ਟੂ-ਡੇਟ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ। ਮੇਰਾ ਪੁਰਾਣਾ ਸੈੱਟਅੱਪ Webflow 'ਤੇ ਸੀ, ਜੋ ਜ਼ਿਆਦਾਤਰ ਟੂਲਸ ਨਾਲੋਂ ਡਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ ਬਿਲਡਰਾਂ ਅਤੇ ਪੇਸ਼ੇਵਰ ਆਊਟਪੁੱਟ ਦੇ ਵਿਚਕਾਰਲੇ ਪਾੜੇ ਨੂੰ ਬਿਹਤਰ ਤਰੀਕੇ ਨਾਲ ਭਰਦਾ ਸੀ। ਪਰ ਜਦੋਂ £300 ਦੇ ਸਾਲਾਨਾ ਬਿੱਲ ਦੇ ਨਾਲ ਰੀਨਿਊਅਲ ਨੋਟਿਸ ਆਇਆ, ਤਾਂ ਮੈਨੂੰ ਇੱਕ ਔਖਾ ਸਵਾਲ ਪੁੱਛਣਾ ਪਿਆ: ਕੀ ਮੈਂ ਵੈਲਯੂ ਲਈ ਪੈਸੇ ਦੇ ਰਿਹਾ ਸੀ, ਜਾਂ ਸਿਰਫ਼ ਸਹੂਲਤ ਲਈ?

ਮੈਂ ਇਸਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਦੁਬਾਰਾ ਬਣਾਉਣ ਦਾ ਫੈਸਲਾ ਕੀਤਾ। ਨਵਾਂ ਸਟੈਕ Astro ਅਤੇ Sanity ਹੈ। ਕੁਝ ਸਮਾਂ ਇਸਦੇ ਨਾਲ ਰਹਿਣ ਤੋਂ ਬਾਅਦ, ਇੱਥੇ ਉਹ ਸਭ ਕੁਝ ਹੈ ਜੋ ਕੰਮ ਕਰਦਾ ਹੈ, ਜੋ ਨਹੀਂ ਕਰਦਾ, ਅਤੇ ਇਹ ਪਹਿਲਾਂ ਵਰਤੇ ਗਏ ਟੂਲਸ ਦੇ ਮੁਕਾਬਲੇ ਕਿੱਥੇ ਖੜ੍ਹਾ ਹੁੰਦਾ ਹੈ।

ਪੋਰਟਫੋਲੀਓ ਲਈ Astro ਕਿਉਂ?

ਜ਼ਿਆਦਾਤਰ ਆਧੁਨਿਕ ਵੈੱਬ ਫਰੇਮਵਰਕ ਪਹਿਲਾਂ JavaScript ਭੇਜਦੇ ਹਨ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਸਵਾਲ ਪੁੱਛਦੇ ਹਨ। Astro ਇਸ ਅੰਦਾਜ਼ੇ ਨੂੰ ਉਲਟਾ ਦਿੰਦਾ ਹੈ। ਇਹ ਬਿਲਡ ਟਾਈਮ 'ਤੇ ਸਾਦਾ ਸਟੈਟਿਕ HTML ਤਿਆਰ ਕਰਦਾ ਹੈ ਅਤੇ JavaScript ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਤੱਕ ਉਦੋਂ ਹੀ ਭੇਜਦਾ ਹੈ ਜਦੋਂ ਕਿਸੇ ਖਾਸ ਕੰਪੋਨੈਂਟ ਨੂੰ ਅਸਲ ਵਿੱਚ ਇਸਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਉਹ ਇਸਨੂੰ islands architecture ਕਹਿੰਦੇ ਹਨ, ਪਰ ਵਿਹਾਰਕ ਨਤੀਜਾ ਸਧਾਰਨ ਹੈ: ਮੇਰੇ ਪੋਰਟਫੋਲੀਓ ਪੇਜਾਂ ਦਾ ਭਾਰ ਲਗਭਗ ਕੁਝ ਵੀ ਨਹੀਂ ਹੈ।

ਰੂਟਿੰਗ ਫਾਈਲ-ਅਧਾਰਤ ਹੈ, ਇਸ ਲਈ ਨਵਾਂ ਪੇਜ ਬਣਾਉਣਾ ਇੱਕ ਫੋਲਡਰ ਵਿੱਚ ਫਾਈਲ ਪਾਉਣ ਜਿੰਨਾ ਆਸਾਨ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। ਕੰਪੋਨੈਂਟਸ ਇੱਕ ਅਜਿਹੀ ਸਿੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਜਾਣਕਾਰੀ ਮਹਿਸੂਸ ਕਰਵਾਏਗੀ ਜੇਕਰ ਤੁਸੀਂ React, Vue, ਜਾਂ Svelte ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ। ਜਦੋਂ ਵੀ ਮੈਂ ਕਿਸੇ ਪ੍ਰੋਜੈਕਟ ਕੇਸ ਸਟੱਡੀ ਨੂੰ ਜੋੜਨਾ ਚਾਹੁੰਦਾ ਹਾਂ, ਤਾਂ ਮੈਨੂੰ ਕੋਈ ਨਵਾਂ ਪੈਰਾਡਾਈਮ ਨਹੀਂ ਲੱਭਣਾ ਪੈਂਦਾ।

ਫਿਰ ਵੀ, ਮੈਂ ਇੱਕ ਗੁੰਝਲਦਾਰ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ Astro ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਾਂਗਾ। ਜੇਕਰ ਤੁਸੀਂ authentication ਜੋੜ ਰਹੇ ਹੋ, ਗਲੋਬਲ ਸਟੇਟ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰ ਰਹੇ ਹੋ, ਜਾਂ ਰੀਅਲ-ਟਾਈਮ ਡੇਟਾ ਨੂੰ ਸੰਭਾਲ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਫਰੇਮਵਰਕ ਨਾਲ ਲੜਨਾ ਪਵੇਗਾ। ਹਾਲਾਂਕਿ, ਮਾਰਕੀਟਿੰਗ ਸਾਈਟਾਂ, ਬਲੌਗਾਂ ਅਤੇ ਪੋਰਟਫੋਲੀਓ ਲਈ, ਇਹ ਰਸਤੇ ਵਿੱਚ ਨਹੀਂ ਆਉਂਦਾ। ਪੇਜ ਤੇਜ਼ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਤੇਜ਼ ਹਨ। ਹੈਡਲਾਈਨ ਜਾਂ ਪੈਰਾਗ੍ਰਾਫ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਦੀ ਉਡੀਕ ਕਰਨ ਲਈ ਕੋਈ hydration overhead ਨਹੀਂ ਹੈ।

WordPress ਤੋਂ Sanity ਵੱਲ ਜਾਣਾ

ਇਸ ਰੀਬਿਲਡ ਤੋਂ ਪਹਿਲਾਂ, ਮੇਰਾ ਵਿਕਲਪ ਹਮੇਸ਼ਾ Advanced Custom Fields ਦੇ ਨਾਲ WordPress ਹੁੰਦਾ ਸੀ। ACF WordPress ਨੂੰ ਸੁਪਰਪਾਵਰ ਦਿੰਦਾ ਹੈ, ਪਰ ਤੁਸੀਂ ਅਜੇ ਵੀ ਕਿਸੇ ਹੋਰ ਦੇ ਬਣਾਏ ਘਰ ਨੂੰ ਕੌਂਫਿਗਿਊਰ ਕਰ ਰਹੇ ਹੁੰਦੇ ਹੋ। Sanity ਇਸਦੇ ਉਲਟ ਕੰਮ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਕੋਡ ਵਿੱਚ ਇੱਕ schema ਲਿਖਦੇ ਹੋ ਜੋ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਕੰਟੈਂਟ ਮਾਡਲ ਕਿਵੇਂ ਦਿਖਦਾ ਹੈ, ਅਤੇ Sanity ਤੁਹਾਡੇ ਫੈਸਲਿਆਂ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਐਡੀਟਿੰਗ ਇੰਟਰਫੇਸ ਬਣਾਉਂਦਾ ਹੈ।

ਮੈਂ ਉਸ ਕੰਟਰੋਲ ਦੀ ਵਰਤੋਂ ਰੀਯੂਜ਼ੇਬਲ ਬਲਾਕਾਂ ਤੋਂ ਇੱਕ ਸਧਾਰਨ ਪੇਜ ਬਿਲਡਰ ਬਣਾਉਣ ਲਈ ਕੀਤੀ। ਮੈਂ ਇੱਕ ਵਾਰ ਹੀਰੋ ਸੈਕਸ਼ਨ ਨੂੰ ਡਿਫਾਈਨ ਕੀਤਾ। ਮੈਂ ਇੱਕ ਵਾਰ ਟੈਸਟੀਮੋਨੀਅਲ ਕੈਰੋਸਲ ਨੂੰ ਡਿਫਾਈਨ ਕੀਤਾ। ਮੈਂ ਇੱਕ ਵਾਰ ਕਾਰਡ ਗਰਿੱਡ ਨੂੰ ਡਿਫਾਈਨ ਕੀਤਾ। ਹੁਣ ਮੈਂ ਨਵਾਂ ਕੋਡ ਲਿਖੇ ਬਿਨਾਂ ਜਾਂ ਪੇਜ ਟੈਂਪਲੇਟ ਨੂੰ ਛੇੜੇ ਬਿਨਾਂ ਉਨ੍ਹਾਂ ਬਲਾਕਾਂ ਨੂੰ ਕਿਸੇ ਵੀ ਕ੍ਰਮ ਵਿੱਚ ਰੱਖ ਕੇ ਨਵੇਂ ਪੇਜ ਬਣਾ ਸਕਦਾ ਹਾਂ।

ਮਾਨਸਿਕਤਾ ਵਿੱਚ ਅੰਤਰ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ। WordPress ਦੇ ਨਾਲ, ਮੈਨੂੰ ਅਕਸਰ ਅਜਿਹਾ ਮਹਿਸੂਸ ਹੁੰਦਾ ਸੀ ਜਿਵੇਂ ਮੈਂ ਇੱਕ ਅਜਿਹੇ ਟੂਲ ਨਾਲ ਜੰਗ ਲੜ ਰਿਹਾ ਹਾਂ ਜੋ ਇੱਕ ਬਲੌਗ ਬਣਨਾ ਚਾਹੁੰਦਾ ਹੈ। Sanity ਦੇ ਨਾਲ, ਮੈਨੂੰ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ ਕਿ ਮੈਂ ਸਾਫਟਵੇਅਰ ਬਣਾ ਰਿਹਾ ਹਾਂ। ਕੰਟੈਂਟ ਸ਼ਾਰਟਕੋਡਾਂ ਦੇ ਨਾਲ ਮਿਲੇ ਸਟਾਈਲਡ HTML ਦੀ ਬਜਾਏ ਸਾਫ਼ ਸਟ੍ਰਕਚਰਡ ਡੇਟਾ ਬਣ ਜਾਂਦਾ ਹੈ। ਮੇਰੇ ਪ੍ਰੋਜੈਕਟਾਂ ਦੇ ਵੇਰਵੇ ਪੋਰਟੇਬਲ ਆਬਜੈਕਟਾਂ ਵਜੋਂ ਰਹਿੰਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਨੂੰ ਜੇਕਰ ਮੈਂ ਚਾਹਾਂ ਤਾਂ ਮੋਬਾਈਲ ਐਪ ਜਾਂ ਨਿਊਜ਼ਲੈਟਰ ਵਿੱਚ ਵਰਤ ਸਕਦਾ ਹਾਂ।

ਇੱਕ ਡਿਪਲਾਈਮੈਂਟ ਵਰਕਫਲੋ ਜੋ ਸਾਫ਼ ਰਹਿੰਦਾ ਹੈ

ਮੇਰਾ ਪੁਰਾਣਾ WordPress ਵਰਕਫਲੋ FTP ਅਪਲੋਡਾਂ, ਸਟੇਜਿੰਗ ਸਬਡੋਮੇਨਾਂ, ਅਤੇ ਪਲਗਇਨ ਅੱਪਡੇਟਾਂ ਦਾ ਇੱਕ ਹਫੜਾ-ਦਫੜਾ ਸੀ ਜੋ ਹਮੇਸ਼ਾ ਸਭ ਤੋਂ ਮਾੜੇ ਸਮੇਂ 'ਤੇ ਖਰਾਬ ਹੁੰਦੇ ਜਾਪਦੇ ਸਨ। ਮੈਂ ਸਿਰਫ਼ ਇੱਕ ਟਾਈਪੋ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ ਵੀ ਇੱਕ ਮਾਨਸਿਕ ਚੈੱਕਲਿਸਟ ਰੱਖਦਾ ਸੀ।

ਨਵਾਂ ਵਰਕਫਲੋ ਛੋਟਾ ਹੈ:

  • ਮੈਂ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਬਦਲਾਅ ਕਰਦਾ ਹਾਂ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਤੁਰੰਤ ਦੇਖਦਾ ਹਾਂ।
  • ਜਦੋਂ ਕੋਡ ਸਹੀ ਲੱਗਦਾ ਹੈ, ਤਾਂ ਮੈਂ GitHub 'ਤੇ ਕਮਿਟ ਕਰਦਾ ਹਾਂ।
  • Vercel ਪੁਸ਼ ਨੂੰ ਲੈਂਦਾ ਹੈ ਅਤੇ ਸਾਈਟ ਨੂੰ ਆਪਣੇ ਆਪ ਡਿਪਲੋਏ ਕਰ ਦਿੰਦਾ ਹੈ।

ਕੋਈ FTP ਕਲਾਇੰਟ ਨਹੀਂ ਹੈ। ਸਿੰਕ ਕਰਨ ਲਈ ਕੋਈ ਸਟੇਜਿੰਗ ਡੇਟਾਬੇਸ ਨਹੀਂ ਹੈ। ਰੈਪੋਜ਼ਟਰੀ ਹੀ source of truth ਹੈ।

ਕੰਟੈਂਟ ਵੀ ਉਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਮੈਂ Sanity ਦੇ ਅੰਦਰ ਕੋਈ ਪੋਸਟ ਪਬਲਿਸ਼ ਜਾਂ ਅੱਪਡੇਟ ਕਰਦਾ ਹਾਂ, ਤਾਂ ਇੱਕ webhook Vercel ਨੂੰ ਸਾਈਟ ਨੂੰ ਰੀਬਿਲਡ ਕਰਨ ਲਈ ਕਹਿੰਦਾ ਹੈ। ਸਟੈਟਿਕ ਪੇਜ ਤਾਜ਼ਾ ਕੰਟੈਂਟ ਦੇ ਨਾਲ ਦੁਬਾਰਾ ਬਣਦੇ ਹਨ, ਅਤੇ CDN ਮੇਰੇ ਦੁਆਰਾ ਸਰਵਰ ਨੂੰ ਛੇੜੇ ਬਿਨਾਂ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦਾ ਹੈ। ਸਭ ਕੁਝ ਮੈਨੂਅਲ ਕਾਪੀ ਕਰਨਗ, ਐਕਸਪੋਰਟ ਕਰਨਗ, ਜਾਂ ਇਸ ਉਮੀਦ ਕਰਨ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਸਿੰਕ ਰਹਿੰਦਾ ਹੈ ਕਿ ਕੋਈ ਪਲਗਇਨ ਡੇਟਾਬੇਸ ਮਾਈਗ੍ਰੇਸ਼ਨ ਅਸਲ ਵਿੱਚ ਕੰਮ ਕਰ ਗਿਆ ਹੈ।

ਟੋਕਨਾਂ ਨਾਲ ਡਿਜ਼ਾਈਨ ਅਤੇ ਕੋ